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hacer un recorrido por este software de una 
manera mas didactica que descriptive. 

Desde el cornienzo el proposito fue desarrollar 
este curso hasta un nivel similar a I que imparto 
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Loao 0: Filosofia de trabaio 



INTRODUCCION 

Este curso fue publicado leccion a leccion en El Blog de Joaclint Istgud: Diseho por Ordenador 
con Freeware desde el 28 de Octubre de 2007 hasta el 31 de Marzo de 2008 

En esta primera leccion del curso no va a aprender a usar Inkscape, logicamente, pero si nunca 
ha utilizado una herramienta de edicion vectorial es probable que su lectura le aclare los 
principales modos en que trabaja este tipo de software. 

Para este curso se usaran siempre referencias y capturas de pantalla relativas a las versiones 
0.45 y 0.46 (win) Algunas capturas no han sido adaptadas de una version a otra entendiendo que 
los cambios son irrelevantes (un cambio fue la sustitucion del termino Trazo por el de Trayecto) 




LA INTERFAZ 

La interfaz presenta todos los elementos a los que estamos acostumbrados y ademas usa multitud 
de atajos en forma de iconos que practicamente se explican por si solos. 
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HERRAMIENTAS Y SUS OPCIONES 

Un primer tanteo haciendo dies por las distintas herramientas (grupo de iconos a la izquierda de la 
interfaz) debe hacernos caer rapidamente en la cuenta de que cada una de ellas Neva asociada 
una serie de opciones que aparecen en horizontal en la parte de arriba de la interfaz. Por ejemplo, 
la herramienta Crear rectangulos y cuadrados cuenta con las siguientes opciones: 




EL FORMATO DE VECTORES NATIVO DE INKSCAPE 

Cuando usted realice un diseno lo estara creando en formato SVG (Scalable Vector Graphic) e 
Inkscape podra guardar toda la information relativa a los distintos objetos que lo componen. 



Seleccione el archive en el que se guardara 



Name: 



mijrabajo.svg 



5ave in folder: falnkscape 
© Browse for other folders 

0 Anadir extension de archive automaticamente 

1 I Activar vista preliminar 



SVG de Inkscape (*.svg) 



Cancel 



Save 



Esto se traduce en que cuando usted vuelva a abrir el documento SVG se lo encontrara tal y como 
lo dejo (a exception del Historial que le permitina regresar a estados anteriores de su trabajo) 



DE VECTORES A BITMAPS 

Una vez acabado su diseno sera el momento de exportarlo en un formato de mapa de bits. 
Inkscape solo trabaja el formato PNG ya que le permite guardar con facilidad las zonas no 
dibujadas como transparentes. En el caso de necesitar la imagen en otro formato debera recurrir a 
un software complementario que le permita esa conversion (Gimp puede servirle) 
Para obtener el PNG debe hacer la linea de comandos Archivo/Exportar mapa de bits... Esto le 
abrira un cuadro de dialogo en el que debe pulsar Exa minar para determinar donde quiere que se 
guarde y con que nombre -no es necesario que ponga la extension PNG- (pulse Guardar para 
regresar al cuadro anterior). Una vez hecho esto pulse Exportar. 
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Exportar mapa de bits (Shift+Ctrl+ 



Area de exportation 



j Dibujo 



Pagina 



Seleccion 



Personalizado 



xO: 
yO: 



0.000 



0.000 



xl: 

yi: 



744.094 



1052.362 



Ancho: 
Alto: 



744.094 



1052.362 



Unidades: 



px 



Tamano del mapa de bits 

Ancho: 744 j$j pixeles a 

pixeles a 



90.00 



PPP 



Alto: 



1052 



90.00 



v PPP 



Nombre del archivo 



Examiner. 



I I Exportar todos los objetos seleccionados por separado 
I I Ocultar todos excepto los seleccionados 



Exportar 



Realizado este paso lo que tiene es una imagen fija basada en pixeles. No sera posible seguir 
editandola (vectorial mente) en Inkscape; a lo sumo en un editor de imagenes como puede ser 
Gimp le puede hacer algun tipo de retoque. 



METER IMAGENES EN LOS DISENOS 




diseno graflco 
e iimpresion 



Es posible incluir imagenes de mapas de bits en su diseno haciendo la linea de comandos 
Archivo/lmportar...] lo que le mostrara un explorador tradicional para que localice su imagen. En 
este caso la variedad de formatos es amplia. Puede importar JPG, PNG, GIF... Con estas 



7 



PROYECTO BIG-CURSO DE INKSCAPE-EL BLOG DE JOACLINT ISTGUD 



imageries podra hacer pocas ediciones (cambiarlas de tamano, rotarlas...) pero puede usarlas de 
referenda como imageries de fondo o incluso pueden formar parte de un diseno como en el 
ejemplo que acompana a estas lineas. 

Estas imagenes importadas NO formaran a priori parte del archivo SVG por lo que no debe 
cambiarlas ni de sitio ni de nombre o de lo contrario Inkscape la sustituira por un recuadro con un 
mensaje de enlace roto. Es posible incrustar las imagenes para poder abrir el SVG en otro 
ordenador, por ejemplo, pero eso se vera en otra leccion. 



ORGANIZACION DEL TRABAJO 



Inkscape, como cualquier editor que se precie, puede organizar el trabajo por capas, a modo de 
hojas transparentes. Cada una incluira la informacion que queramos y seran muy importantes 
cuando los disenos sean laboriosos y consten de numerosos objetos. Las propiedades que hacen 
utiles estas capas son las de visibilidad/invisibilidad y bloqueada/desbloqueada. 

Supongamos que a lo largo de la lectura de esta leccion ha sacado usted a escena un rectangulo 
y ha importado un mapa de bits para confirmar el tutorial. Ambos objetos se encontraran en la 
capa inicial de trabajo Capa 1 (esta capa no puede ser borrada) 

Manipule los objetos (seleccionar y arrastrar) usando la herramienta de Seleccionar y transformar 
objetos. 




La zona que informa sobre las capas nos dice claramente que nos encontramos en Capa 1, que 
esta visible y desbloqueada. 
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Vamos a crear dos nuevas capas. Para ello realice la linea de comandos Capa/ Anadir capa. 
introduzca un nombre y pulse Anadir. 



Anadir cap 



Nombre de la capa: 
Posicion: 



irnagen_vectorial 



Encirina de la actual 



Cancel 



Anadir 



Puede comprobar que en la zona inferior, donde antes ponia Capa 1, ahora pone el nombre de la 
nueva capa (en nuestro caso imagen_vectorial) 

Repita el proceso y anada una nueva capa, en este caso con el nombre imagen_bitmap. 
Comprobara que Inkscape siempre deja seleccionada la ultima capa creada. 

Al seleccionar el rectangulo la capa cambia a Capa 1 que es donde se encuentra el objeto 
seleccionado. Con el seleccionado haga la linea de comandos Capa/Mover la selection a la capa 
superior a la actual. De este modo el rectangulo ira a la capa imagen_vectorial. Ahora seleccione 
la imagen de mapa de bits y haga DOS veces la linea de comandos Capa/Mover la selection a la 
capa superior a la actual, para que se encuentre en la capa imagen_bitmap. 

Ya tiene organizado su trabajo por capas. Lo ideal hubiera sido hacer cada objeto en la capa 
adecuada desde el principio... 

Cuando se trabaja por capas es importantfsimo revisar constantemente que la capa en la que nos 
encontramos es en la que queremos trabajar, de lo contrario nos tendremos que ocupar mas 
adelante de hacer arreglos como los que hemos hecho en el ejemplo anterior. 

Para saber el estado y editar algunos aspectos de las capas lo mejor es el panel que se obtiene 
con la linea de comandos Capa/Capas... 




QCapas (Shift+Ctrl+L) 0 (El 



i^f Capa 1 



Modo de rnezcla: 
Opacidad, % 



♦ 




♦ 






EJ 


Normal VJ 



100.0 



Close 
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Desde este panel puede, desde anadir o eliminar capas, hasta cambiarles el nombre, el orden, o 
variar su nivel de transparencia. 

Cuando se elimina una capa debe tener en cuenta que se eliminara todo lo que este contenido en 
ella. 

Elimine las dos capas que ha creado y comprobara como desaparece el rectangulo y la imagen de 
mapa de bits. Debe quedarle unicamente la capa inicial Capa 1 y el lienzo en bianco. 



MODOS DE EDICION 

Es importante senalar los tres niveles de edicion con los que podemos trabajar aunque no 
profundizaremos en ninguno de ellos: 

• Modo Edicion de objeto 

• Modo Edicion de tiradores 

• Modo Edicion de nodos 

Modo Edicion de objeto 




Ponga en el lienzo un rectangulo y seleccionelo con la herramienta Seleccionar y transformar 

objetos. Debe tener un aspecto como el de la ilustracion. 

A partir de ahora vamos a denominar a esas flechas transformadores. 

Cuando el raton active uno de esos transformadores se pondra de color verde y podra arrastrarlo 
haciendo la edicion correspondiente. Puede aumentar o disminuir el tamano del objeto 
adaptandolo a sus necesidades de diseno. 

Si hace die sobre el objeto, los transformadores se permutaran por otros similares que le serviran 
para inclinar o para rotar el objeto. 
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El centro para esas transformaciones es el signo + que aparece en el centro (puede cambiarse de 
lugar simplemente arrastrandolo con el raton) 

Todas estas transformaciones corresponden a una edicion de objeto que afecta a toda la figura y 
suponen el primer nivel de edicion. Las transformaciones son cuatro: mover, escalar, rotar e 
inclinar. 



La transformacion mover la puede realizar independientemente de los transformadores que tenga 
la figura; solo debe arrastrarlo con el raton. 

No conviene olvidar una ultima edicion que afecta a todo el objeto: eliminarlo. Para ello debe usar 
la tecla Supr. 



Un objeto consta de Relleno y Trazo (contorno). Para editar los colores de estos dos elementos, 
asi como las propiedades del estilo del trazo, debe acceder al cuadro Objeto/Relleno y borde... 



r, 

' Relleno y borde (Shift+CtrL+F) 


H 1 


□ 


>< 


^Relleno y borde (Shift+Ctrl+F) 




0 IS 



Relleno [ 'Color de trazo 



-Estilo de trazo 



□ □□ ? 



■Color uniforme 




Desenfoque: 

B-^ — 



0.0 



Opacidad^ % 



100.0 



Close 



No vamos a estudiar aquf las posibilidades que se ofertan en este cuadro pero es importante que 
comience a familiarizarse con el hecho de que para Inkscape un objeto consta de dos partes 
claramente diferenciadas y que se editan por separado. 

De todas las posibilidades de seleccion de color (RGB, HSL, CMYK, Rueda y CMS) yo le 
recomiendo la rueda de color por ser la mas intuitiva de todas; escoja el color en la corona circular 
y el valor en el triangulo. 
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Le dejo un ejemplo de diseno elemental usando solo el modo edicion de objeto: 




Modo Edicion de tiradores 



Habra observado que al crear un cuadrado este no aparece directamente con los transformadores 
sino con lo que vamos a llamar a partir de ahora tiradores como muestra la ilustracion. 
La edicion de tiradores constituye un segundo nivel de edicion para poder manipular ciertas 
caracteristicas del objeto. 

- En el Rectangulo y cuadrado se puede editar la redondez de las esquinas. 

- En la Elipse y cfrculo puede abrir en uno de sus puntos para conseguir sectores. 

- En la Estrella y poligono puede editar las puntas exteriores y las interiores. 

- En la Espiral puede mover el comienzo y el final. 

- En la Caja3D puede editar sus tres dimensiones por separado. 

Si se encuentra en edicion de objeto puede ir a la edicion de tiradores a traves de la segunda 
herramienta Editar nodos de trazo o tiradores de control. 

El resto de las herramientas no disponen de este segundo nivel de edicion por tiradores. Un 
ejemplo: 



r ^ 
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Modo Edicion de nodos 

Hay varias maneras de llegar a tener nuestro objeto convertido en una secuencia de curvas y 
rectas editables desde sus puntos fundamentales (nodos). La mas logica es Trazo/Objeto a 
trazo... (en Inkscape 0.46 Trazo se sustituyo por Trayecto) 



Si hace la operation desde edicion de objeto, para ver el cambio efectuado debe ir al modo de 
edicion de nodos con la herramienta Editar nodos de trazo o tiradores de control (la misma que 
antes usaba para editar tiradores) 

Si convierte en trazo desde edicion de tiradores vera el cambio de tiradores a nodos en el 
momento de la edicion. 

En cualquiera de los dos casos ya tiene el objeto convertido en una secuencia de rectas y curvas 
editables. Puede mover los nodos independientemente (coja y arrastre) 

Hay varios tipos de nodos pero tampoco los vamos a estudiar aqui. Eso si, tome nota de que 
puede editar el nodo en si o sus tiradores (en este caso el nodo no se movera pero si las entradas 
y las salidas del mismo) 
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^Quiere un ejemplo de lo que puede hacer editando los nodos...? 



Resumiendo... 




Ahora nos vamos a detener un momento para estudiar detalladamente tres teclas (CONTROL, 
SHIFT y ALT) y, creame, la correcta utilization de estas teclas hara que su trabajo sea preciso 
cuando tenga que serlo; dejarlo para mas adelante supondna una perdida de tiempo y se 
traducina en que usted adquirina habitos incorrectos de trabajo que despues tendria que olvidar. 
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TECLA CONTROL 

cSe ha fijado en el teclado modelo "Inkscape" de la pagina anterior? Esta hecho con nuestro 
programa de edicion vectorial favorito... 

Saque a escena un Rectangulo mientras mantiene CONTROL pulsado. Al deslizar el raton debe 
notar lo siguiente: 

• si el movimiento es diagonal (unos 45°) la proportion de los lados no se pierde y puede 
tener la certeza de que lo que crea es un cuadrado perfecto con todas sus propiedades. 

• si en un momento dado de la creation del objeto decide mover el raton en horizontal o 
vertical, la altura o el ancho se mantienen fijos. 



Una vez creado el Rectangulo edite los tiradores (recuerde que tiene que hacerlo con CONTROL 
pulsado): 

• Los tiradores cuadrados editados en diagonal mantendran la proporcionalidad del 
rectangulo. 

• Los tiradores editados en horizontal o en vertical restringiran el alto o el ancho del 
rectangulo. 

• El tirador circular hara que el radio de las tangencias en X y en Y sean iguales. 



Texto Efectos 


Ayuda 








!?Ti& xm 


Rjo 20,003 H| Ry: 20,003 § P* 


V 


No redondeado 


, I , I . 1 , I , 


u 

, i . i , i , i 


, 1 . i , i , i . i , 1 , i , i . i 
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Pase el Rectangulo a modo edicion de objeto y con CONTROL pulsado mueva los 
transformadores. En todos los casos la edicion le permitira cambiar la escala del objeto 
manteniendo la proporcionalidad y tomando como origen el vertice opuesto de la caja del objeto 
(rectangulo que lo circunscribe) 



Haga die sobre el objeto para permutar los tiradores de escalado por los de inclinar y rotar. 
• los tiradores de rotacion permiten controlar giros de 15° al igual que los de inclinar. 




El angulo de 15° es ideal para poder hacer gran cantidad de ediciones pero puede que a usted le 
interesen saltos de otro valor (como 45°) 

Para ello haga la linea de comandos Archivo/Preferencias de lnkscape.../Pasos y escoja el valor 
para el angulo de rotacion en Rotacion se ajusta cada 




Preferencias de Inkscape (Shift+Ctrl+P) 



Raton 

Desplazamiento 








B Herrannientas 






Selector 






Nodo 






Retoques 






Zoom 






ED Forrnas 






Lapiz 






Plurna 






Caligrafia 






Cubo de pintura 






Texto 






Gradiente 






Conector 






Cuentagotas 






Ventanas 




Clones 




Trazos de recorte y mascaras 




Transformaciones 




Filtros 


0 



- □ 2 



Pasos 



Las flechas mueven: [2.0000 
>y<escalan: 1 2.0000 | 

Reducir/ampliar: 2.0000 



px 
px 
px 



l~~l Mostrar los angulos como en una brujula 
Rotacion se ajusta cada: 
Alejar/acercar: 



15 



141 



v| grado: 



Close 
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Tenga en cuenta que es un cambio que se guardara y permanecera las proximas veces que abra 
Inkscape. 

Tanto con los transformadores de escala como con los de inclination y rotation puede desplazar 
el objeto con solo mantener pulsado el raton y arrastrar. Si realiza esta operation con CONTROL 
pulsado los movimientos quedaran restringidos al eje X y al Y. 



Esto ultimo ocurre igual si desplaza un nodo. 

• si lo que mueve es un tirador de un nodo el giro vuelve a ser de 15° 




Cuando mueva con CONTROL pulsado un nodo de un gradiente de color se encontrara estos 
efectos: 

• si lo desplaza en la direction del gradiente, esta direction se mantendra. 

• si se sale de la direction, los saltos seran de 15° 
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Qbjeto I 



JP Relleno y borde. 



i3£ Propiedades del gbjeto, 

15 Agrupar 
@ Desagrupar 

Clip 

Mascara 
Patron 

Elevar 
*J Bajar 

H Traer al frente 
i= Bajar al fondo 

Rotar 90*3 la derecha 
£t Rotar 90 D a la izquierds 
Jit, Reflejo horizontal 

Reflejo vertical 

hi*/ Transtormar... 
Iti Alinear y distribuir. . . 
SB Ordenar en rejilla... 



Mayus.-HZtrl+F 



Relleno y borde (Mayus..+Ctr... - 





Hay mas ocasiones en las que se va a encontrar este tipo de salto. Enumerarlas todas sena 
interminable asi que si ha comprendido el modo de trabajar de la tecla CONTROL aproveche 
todas sus posibilidades para garantizar la precision en sus disenos siempre que la necesite. 

Una posibilidad mas a tener en cuenta con respecto a la tecla CONTROL es la de retroceso con 
CONTROL Z. Tiene otras posibilidades para ir hacia atras en su trabajos como Edicion/Deshacer 
o el icono habitual, pero CONTROL Z es la mejor opcion por la rapidez que supone. 
Ir hacia adelante es CONTROL Y 

Ah!... y un a ultima y util funcion de la tecla CONTROL: junto con la rueda del raton hara Zoom In y 
Zooat? Out 
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TECLA SHIFT 

• Es la tecla para acumular objetos o nodos seleccionados. En ese sentido podnamos 
traducirla como "tecla para la selection multiple" (los modos de seleccion se estudian mas 
abajo) 

• En la edicion con los transformadores de escalado puede traducirse como "usarcomo 
origen el centro de giro" (ya sabe que el centro de giro se representa con un signo + cuando 
estan en pantalla los transformadores de rotar e inclinar, y que lo puede desplazar con el 
raton) 

• En la edicion de rotar e inclinar se traduciria por "usar como centro de giro el punto opuesto 
de la caja del objeto" 



TECLAS CONTROL Y SHIFT A LA VEZ 

• En la edicion de escalado lo que se obtiene es un cambio de tamano manteniendo la 
proporcionalidad y usando como origen el centro de giro. 

• En la edicion de inclinado y rotado consigue un giro a saltos de 15° usando como centro de 
giro el punto opuesto de la caja del objeto. 



TECLA ALT 

A veces puede que tenga seleccionado un objeto pero cuando pretenda moverlo Inkscape es 
posible que cambie la seleccion por el que esta mas arriba o situaciones similares. En ese caso 
comience la edicion de desplazamiento con ALT pulsado; de este modo la seleccion queda 
"anclada" y no se produciran ese tipo de situaciones. 



SELECCION DE OBJETOS Y NODOS 

Pongamos que ha sacado a escena numerosos objetos y, sobre todo, que unos se tapan a otros. 
La seleccion y manipulation puede convertirse en un problema. En principio yo le recomiendo un 
poco de orden y que organice su trabajo por capas pero si no ha sido cuidadoso Inkscape le 
ofrece unas cuantas posibilidades para seleccionar objetos en estas condiciones. 

Seleccion ordenada 

Inkscape es capaz de ir pasando la seleccion de un objeto a otro de una manera ordenada 
mediante el uso de la tecla TABULADOR. Exactamente igual ocurre si lo que esta seleccionando 
son nodos. 

La logica que sigue Inkscape en esta secuencia de seleccion de objetos es el de Ordenacidn; 
primero el del fondo, despues el que esta mas arriba, y asi hasta el que esta arriba del todo. En la 
secuencia de seleccion de nodos sigue un orden horario. 
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Seleccion hacia abajo 

Si tiene muchos objetos tapandose unos a otros puede recurrir a seleccionar varias veces con la 
tecla ALT pulsada. Asi Inkscape sera sensible a objetos que estan totalmente tapados por otros. 
Esta utilidad no sirve en la seleccion de nodos. 

Seleccion multiple 

Simplemente seleccione objetos o nodos mientras mantiene SHIFT pulsado. 
Deseleccionar un objeto 

Vuelva a hacer die sobre un objeto o nodo seleccionado. Si quiere conservar otros objetos o 
nodos ya seleccionados mantenga SHIFT pulsado. 

Seleccion de caja 

Incluya todos los objetos (uno o varios) que quiere seleccionar dentro de un rectangulo virtual 
hecho con la herramienta Seleccionar. Si esta seleccionando nodos opere igual pero con la 
herramienta Editar nodos o tiradores seleccionada. 

Seleccion por contacto 

Novedad en Inkscape 0.46. Asegurese de no tener ningun objeto seleccionado, pulse ALT y 
describa con el raton una trayectoria; los objetos que sean tocados por esa linea quedaran 
seleccionados. 



Son muchas las herramientas que va a encontrar dentro de Inkscape para poder hacer su trabajo 
mas comodo y exacto pero no se van a estudiar en este tutorial. Este, sobre la filosofia de trabajo 
de Inkscape, termina aqui. Espero que haya afianzado los conceptos para poder comenzar a 
trabajar con facilidad y precision. 
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Este es el logo que vamos a realizar en este primer tutorial practico del curso: 




Si algo define a este logotipo es la sencillez. Solo hay una condicion a tener en cuenta antes de 
ponerse a trabajar: la letra T esta PERFECTAMENTE centrada respecto al cfrculo. A esta alturas y 
despues de haber asimilado la Filosoffa de trabajo en la leccion anterior debe saber que ese tipo 
de detalles van a quedar en manos del programa. 

Yo trabajare la mayor parte de las veces con el bitmap original debajo a modo de plantilla. 
Comenzamos por sacar a escena un cfrculo (con CONTROL pulsado) y despues ajustamos con 
los transformadores, siempre con CONTROL pulsado. Para trabajar a gusto puede bajar el nivel 
de opacidad (O) desde la interfaz principal sin acceder al editor de colores tal y como ilustra la 
imagen siguiente. 
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Seleccione la herramienta de Texto y haga die en cualquier sitio del lienzo, escriba la letra T 
mayuscula y pulse INTRO para finalizar la incorporation de texto. Con la herramienta de 
Selection haga la letra mas grande para poder trabajar mas comodamente. 




Abra el editor de Textos con la linea de comandos Texto/Texto y Tipografia... Escoja como fuente 
Arial Black (por coger una de las mas comunes y que mas se aproxima a la de nuestro logotipo) 



Texto y tipografia (Mayus.+CtrL+T) 



Tipcigrahd; Texto 



j-Fannilia de tipografias 



Estilo 



Arial 

Arial Black 

Bitstrearn Vera Sans 

Bitstrearm Vera Sans Mono 

Bitstrearn Vera Serif 

Comic Sans MS 

courier 

Courier New 

Estrangelo Edessa 

Franklin Gothic Medium 

Gautami 

Georgia 

Impact 

Latha 



0 



Normal 
Italic 



Tarnano de tipografia : 267 . 46 



Espaciado de lineas: 
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Ahora proceda de la misma manera que con el circulo; es decir, coloquelo encima de la imagen de 
referenda y utilice los transformadores para ajustar el ancho y el alto. 



V it f 

+*■ 




Es el momento de ir al editor de colores. Seleccione el circulo y haga la linea de comandos 
Objeto/Relleno y borde... En este cuadro vaya a la pestana Color del trazo y escoja la opcion Sin 
relleno simbolizado por una X. Despues vuelva el nivel de opacidad hasta 100.0 en Opacidad 
maestra, %. Esta opcion y la de Desenfocar, % afectan a todo el objeto (relleno y trazo) 



Relleno y borde (Mayus.+Ctr... - □ 



Relleno T Color de trazo Estilo de trazo 



□ 



><□□□□? 



■Sin relleno - 



Desenfocarj % 



0.0 



Opacidad maestra 



1 100.0 
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Puede darle la sensacion de que su ojo es infalible y que los dos elementos (cfrculo y texto) estan 
perfectamente centrados; pero la verdad es que no tenemos ninguna garantia de ello. Para hacer 
la alineacion con precision seleccione los dos objetos y haga la Ifnea de comandos Objeto/Alinear 
y distribuir... La opcion que buscamos es la resaltada en el siguiente grafico. 



Alinear y distribuir (Mayu... 



I 



Alinear- 



Relativo a: Seleccion 



0 



Wfl tfj lofl ntf J» 



Distribuir ■ 



P= ifil tfia m F> 



□ □ 



-Eliminar solapamientos - 



H: 



0.0 



V: 



0.0 



BOD 



Disposicion de conectores- 



En los iconos que aparecen en la seccion Alinear los rectangulos azules (y los cuadrados 
amarillos) representan las cajas de seleccion de los objetos. Ciertamente en nuestro caso la 
posicion relativa a la horizontalidad debemos hacerla a ojo, ya que no tenemos referencias 
suficientes para hacerla con los criterios que usase en su momento el disenador del logotipo 
original (puede comprobar si quiere que la opcion de alineacion horizontal no se corresponde con 
el diseno) 

No deje pasar la ocasion de ver las opciones (y combinaciones de opciones) de los iconos que 
solo tienen rectangulos azules en el apartado Alinear -olvide de momento los que tienen 
cuadrados amarillos- (siempre podra retroceder con CONTROL Z) 
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A estas alturas no estamos en condiciones de conseguir la segunda opcion, de todos modos 
parece mas sensata la primera... 

Seleccione la letra T y vaya al editor de colores. En la pestana Relleno mantenga la opcion Color 
uniforme y seleccione un color bianco (yo le recomiendo la Rueda) 



Relleno y borde (Mayus.+Ctr... - □ 



Relleno | F Color de trazo | ==* Estilo de tr azo 1 



x □□□□ 



Color uniforme 



■0 




Desenfocar, % 



J- 



Opacidad rmaestra J % 



0.0 



100.0 



Seleccione ahora los dos objetos y vamos a crear un grupo con ellos. Las ventajas de ir creando 
grupos son muchas a la hora llevar un trabajo organizado y ademas siempre existe la opcion de 
desagrupar... Repito, seleccione ambos objetos y haga la Ifnea de comandos Objeto/Agrupar. Ya 
tiene listo su logo como si fuera un solo objeto. 
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Para optimizar su trabajo debe ir usando iconos y accesos rapidos a traves de teclado. Tome 
como costumbre fijarse en las combinaciones de teclas que se muestran en las opciones de los 
menus; poco a poco se ira quedando con ellas y trabajara de una manera mas ligera. 
En el caso de nuestro tutorial: 

• Nivel de opacidad del objeto: tal y como se estudio mas arriba. Use el cuadro numerico que 
se encuentra en la parte inferior izquierda de la interfaz y denominado O: en lugar de 
desplegar el Editor de colores con Objeto/Relleno y borde... 

• Acceda a este cuadro del Editor de colores a traves del icono correspondiente 

□ & □ ffl bb> ^ # % gq a @ ® Q 1 1 &\r m & xa 

• Acceda al Editor de textos con el icono correspondiente en lugar de usar Ifnea de comandos 

□ & □ ffl -0 & % * C Q©@ D 1 li i2 S !^T^ I KS 

• Acceda al cuadro de Alinear y distribuir con el icono correspondiente 



D&Oiffii ^# Dii 

• Para agrupar use el icono de la barra o la combinacion CONTROL G 




xs 
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• Aplique color uniforme al relleno de un objeto haciendo die (siempre que el color se adapte 
a sus necesidades) sobre uno de los colores que se ofrecen en las paletas. Si lo que quiere 
es dar color al trazo haga lo mismo pero con la tecla SHIFT pulsada. El la parte derecha 
hay una flecha que le permite acceder a varias paleta. Incluso alguna especialmente 
pensada para la edicion web. 




• Muy util tambien para dar color al relleno y al trazo es coger el color en la paleta y soltarlo 
encima del objeto correspondiente (aqui tambien funciona SHIFT para dar color al trazo) La 
gran ventaja de este metodo es que NO hay que tener seleccionado el objeto que 
queremos editar. Completando todo esto tambien tiene la posibilidad de coger el color y 
soltarlo en la zona de los atributos propios del objeto que tiene seleccionado y situados en 
la parte inferior izquierda de la interfaz (F=relleno; S=trazo) 



Espero que haciendo este logo tan sencillo haya afianzado conceptos para trabajar de una 
manera solvente y rapida con Inkscape cuando hay que alinear objetos. Recuerde que este es un 
tutorial de iniciacion; no siempre el trabajo sera tan "facil". 
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Logo 2: AMneacjon con un solo objeto 



En esta ocasion el logotipo es algo mas complejo y presenta varias opciones para afrontar su 
construction: 




Nosotros aqui vamos a optar por el mas conveniente a nuestro nivel de conocimientos aunque el 
resultado presentara algunos problemas (al menos en las versiones 0.45 y 0.46 win) 

Olvide la apariencia de que el logotipo esta formado por tres objetos y comience por preparar las 
opciones de la herramienta de Poligonos para sacar a escena un triangulo con CONTROL pulsado 
y asf asegurarse que queda apoyado en un lado. 
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Para evitar complicaciones desagradables vaya al editor de colores y haga que el objeto no tenga 
trazo (de paso cambie el color de relleno por un color que se parezca al del logotipo original) 



Relleno y borde (Mayus.+Ctr... - □ 



Relleno r Color de trazo e- Estilo de trazo 

vin □ □ □ ? 



Sin relleno- 



Antes de continuar trabajando en nuestro logotipo va a permitirme que me detenga un momento 
para que comprenda algunos detalles importantes para continuar trabajando con precision. 
Vamos a sacar unas guias de referenda horizontales y verticales que coincidiran con los 
margenes de la caja de seleccion del objeto. Estas guias se sacan con el raton como si estuvieran 
ocultas debajo de las reglas de arriba y de la izquierda. Saque las cuatro guias necesarias; 
coloquelas a ojo, en este caso no es necesaria una precision absoluta para lo que quiero que 
aprenda. 




Puede ahora imaginar una red modular en la que el rectangulo de la caja de seleccion es la 
unidad. Inkscape le ofrece la posibilidad de mover el objeto por esa red de manera precisa. Vamos 
a verlo. Saque el menu de Alinear y distribuir... 



• 

Alinear y distribuir (Mayu... j>C. 


Alinpflr 


Relativo a: j Seleccion 


0 


si 
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Los iconos con cuadrado amarillo permiten la alineacion de un solo objeto de tal modo que toma 
como referenda los limites de la caja de seleccion. Si pulsa estos iconos podra comprobar que el 
desplazamiento del objeto es completamente logico (haga la prueba) 



Sabiendo esto vamos a conseguir en pocos pasos el logo que estamos construyendo. 
Comience por duplicar el objeto que ya tiene con la linea de comandos Edicion/Duplicar, acto 
seguido haga su simetrico respecto al eje horizontal con Objeto/Reflejo vertical. Si cambia de color 
este ultimo objeto debe tener una imagen como esta: 




Mantenga seleccionado este ultimo objeto y proceda a alinearlo para que quede correctamente de 
acuerdo con el logotipo original. 



A linear y dfstrlbulr (Itayil. 



- -sear 



Rjdativo a: 



Seleccion 



s 



aH, ^ infl otf ^ 



Dtstribuir 



p-b f!3 fl\ p> 



Oiminar solapamientos 



H: 0 



.0 



V; 0,0 



3LB 



Disposicion de conectores 
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Es el momento de agrupar los dos objetos. Seleccionelos y haga Objeto/Agrupar. 
Logicamente necesitamos esta misma figura por triplicado y con los giros apropiados. 
Duplique el objeto y haga la linea de comandos Objeto/Transformar para hacer visible un nuevo 
cuadro en el que aparecen varias pestanas, de las cuales la que nos interesa a nosotros es la 
llamada Rotar. Nuestro angulo sera 120°. 




5? Relleno y borde... 
|_3 Propiedades del objeto. 



Mayus.+Ctrl+F 
Mayus.+Ctrl+O 



Agrupar 


Ctrl+G 


l3 Desagrupar 


Mayus.+Ctrl+G 


Clip 


► 


Mascara 


► 


Patron 


► 


W* Elevar 


PgUp 


^ Bajar 


PgDn 


11 Traer al frente 


Home 


i| Bajar al fondo 


End 


t£i Rotar 90° a la derecha 




Rotar 90° a la izquierda 




Jit Reflejo horizontal 


H 


Reflejo vertical 


V 


I " Transformer... 


Mayus.+Ctrl+M 


Itj Alinear y distribuir... 


Mayus.+Ctrl+A 


S3 Grdenar en rejilla... 





Transfo i ma r (May us . + Ct r 1+ M ) 



Mover 




Escalar Rotar Inclinar Matriz 



Angulo 



120.000 



C deg 



HI Aplicar a cada objeto por separado 



Limpiar 



Aplicar 





Para obtener el tercer objeto tiene varias opciones. Yo le propongo duplicar este ultimo objeto y 
hacer su simetrico respecto al eje vertical con Objeto/Espejo horizontal. 
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Aprovechando que este ultimo objeto esta seleccionado repita la tecnica que ya conoce para 
colocarlo correctamente: 



A Linear y dislribuir (Mayu... 



Aiinear 



Relatives: Section 



EMribur 



Ji oj-j pi fljj & 



M; C.H 



o.o 



[*3f»sicidn de conectores 




Agrupe los dos objetos y seleccione el grupo resultante y el que ya tenia. Es el momento de hacer 
las ultimas alineaciones para conseguir el logo final. Primero ponga los dos objetos en la misma 
vertical y despues haga una alineacion respecto al borde superior de las cajas. 



A linear y dislribuir (Mayu.,. X 




Elimriar sotapMnienbos 



K™ M*\™ ftffl 

CNsposfcStfri de coneebwes 
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Para terminar seleccione solo el objeto del medio (el rombo simple) y haga la alineacion de un solo 
objeto que ya conoce: 



Alincar y dislriliuir (Md/ii... X 



£ W *M 1 V J* 
^ * PI & 



□niia- snhpai w i ftua- " 



H; n.n pv= n.n 




Ya puede agrupar los dos objetos. 



Para hacer la eleccion de color lo mejor es seleccionar el grupo, escoger la herramienta Selection 
de colores medios de la imagen y hacer die en cualquier lugar del logo original. Inkscape tomara 
la muestra de color del pixel seleccionado y se lo aplicara a todo el grupo. 




Es posible que surjan problemas en algunas representaciones (dependiendo del zoom en el que 
se encuentre hay veces que incluso desaparece) El grosor de la linea "rara" no aumenta con el 
zoom asi que no es un problema de la vectorizacion, pero tambien es verdad que no debena 
aparecer. 
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Recuerde que es importante tener en cuenta que el metodo que le he ensehado en este 
tutorial no es el mas adecuado para realizar este logo. Tomelo como una leccion sobre 
alineaciones y poco mas (cuando le explique las operaciones booleanas y los snaps comprendera 
lo que le estoy diciendo) 

Como ya hicimos en el tutorial anterior vamos a ver los recursos para optimizar nuestro trabajo. 

• Acceda a la operacion Espejo vertical y Espejo horizontal a traves de los iconos de las 
opciones de la herramienta Seleccionar (o con las teclas V y H): 




Acceda a la operacion Duplicar objeto a traves del icono correspondiente: 



• Personalice las propiedades (relleno y borde) de los rectangulos, elipses y poligonos para 
que salgan a escena SIN borde. Este consejo se lo doy porque, despues de muchas horas 
de trabajo con Inkscape, pienso que es lo mas apropiado. Por norma general el borde es lo 
primero que se elimina; es posible incluso que de problemas si se realiza una operacion 
booleana y despues queremos la forma sin trazo (de nuevo las booleanas...) De todos 
modos esto es un consejo. Para hacer lo que le digo saque a escena tres objetos; dele a 
cada uno de un color y elimfneles el contorno (esta edicion se la puede hacer a los tres a la 
vez). Seleccione uno de ellos y despues haga la Ifnea de comandos Archivo/Preferencias 
de Inkscape. En el cuadro que le aparece despliegue la seccion de Herramientas; dentro de 
esta la de Formas] y al final la llamada Rectangulo. 

Se supone que tiene usted seleccionado un rectangulo de un color de relleno y sin borde. Si es 
asi, presione el boton Tomarde la seleccion. Repita esta operacion para la elipse y para el 
poligono (estrella). Mi consejo es que escoja un color distinto para cada uno. 



! Inkscape {MayiiK. + Clrl + P) 



Rated 






Desplazorricnio 






Pasos 






b HaramientaE 






Seectcr 






Undo 






Zdoti 






b Formas 












Elpse 






Estrella 






Espfal 






LdpE 






ftund 






».:\yrr. 










] 



PyLliiritjLilu 



© El estib piopH de esta herramienta: 



fcmar de b sricccion 
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Una de las importantes novedades de Inkscape 0.46 es poder empotrar muchos de los cuadros en 
la parte derecha: 



Alincar y clisl ribnir . 



lo£| Ujf J» 



EL Ep is, £ A 




|h: }0.0 | gvi |olo g 




^^^^^^ 



Arrastre y suelte 
cuando el cursor 
na mano 




En Preferencias de Inkscape tiene una seccion para configurar a su gusto el comportamiento de 
las ventanas: 



Vrtiia 

Guardando geometria de las ventanas (>amano y poskion) 

O Me guards la aeometria de las venr^nas 

O Rerordar yu^laijew^ 

{*) Guard-sr y nsstaurar la geofnetria de las verit-arws para cada docunenfco 

Comportamiefito de las dl£loQO$ (necesrta reinic4ar}t 

@ Acc^labie 

Q AJuftt* M dfcup si cauiba el tanvra de la ventMU 
0 MwJtr* unboti6fidfr dfrr*fl^bsditego3 
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Respecto a esto no puedo decirle mucho. Durante tiempo fue una de las principales sugerencias 
de los usuarios pero yo me acostumbre a las ventanas flotantes y sigo usandolas. Busque su 
propia configuration para trabajar a gusto. 



Los cambios que haga en esta section de Preferencias de Inkscape se mantendran la proxima 
vez que lo abra. 
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Loqo 3: Diferencias con obietos 



En esta practica le propongo un logo muy sencillo visualmente y tambien sencillo de realizar con 
Inkscape: 




Usaremos para realizar este logo un recurso denominado operaciones booleanas. Es ciento que 
en Inkscape no se hace referenda a este termino pero es muy habitual en el mundo del diseno 
(sobre todo en el 3D) denominar operaciones booleanas a las operaciones de suma, resta e 
interseccion de objetos. En Inkscape este tipo de operacioones se extienden a la division, 
exclusion y cortartrazo] se encuentran en el menu Trazo. 

Ctrl++ j 
Ctrl+- 
Ctrl+* 
Ctrl+ A 
Ctrl+/ 
Ctrl+Alt+Z 



Su uso es muy intuitivo pero conviene tener algunos detalles en cuenta: 

• El resultado de una operacion booleana es un unico objeto por lo que solo tendra un relleno 
y un borde. 

• La Union (suma) es la unica operacion booleana que admite tener seleccionados mas de 
dos objetos. 

• El resto de las booleanas solo funcionan con dos objetos seleccionados y se entendera que 
el situado mas abajo es el objeto dominante y prebalecera en el resultado. 



Union 
[V Diferencia 
^ Interseccion 
[^p Exclusion 

Division 
| [V Cortar trazo 
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En el ejemplo siguiente se ve la consecuencia de esto ultimo. En los dos casos se ha 
realizado, una vez seleccionados los dos objetos, la secuencia de comandos Trazo/Union. 
Geometricamente el resultado es el mismo pero la herencia del color es relativa al objeto que 
estaba debajo en el momento de la operation. 




En otras operaciones como Trazo/ Diferencia, este detalle sera trascendental. 




Ahora que ya conocemos un poco Inkscape podemos ir comprendiendo que las operaciones 
booleanas son una de las armas mas poderosas del diseno vectorial. 

• El objeto resultante queda convertido en trazo de forma inmediata. 
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Como es logico usted experimental con estas operaciones pero no se preocupe si de momento 
tiene problemas con Trazo/Division y, sobre todo, con Trazo/Cortar trazo. 

Despues de esta explication con la que espero haberle afianzado el concepto que estamos 
tratando (el dominio solo se lo dara la practica), pasemos a realizar el logotipo de este tutorial. 

Primero el circulo (abajo) y despues un rectancgulo que incluya los dos elementos horizontales 
(encima) En el ejemplo del tutorial se han bajado las transparencias de los dos objetos para que 
pueda apreciarse como se ha usado el original de referenda. 



Ahora seleccionamos el rectangulo y hacemos la linea de comandos Objeto/Transformar para 
poder hacer una inclinacion controlada numericamente. El angulo de inclinacion horizontal es -45° 
(negativo). 



Transformer (Mayus.+CtrhM) 



(jciver Escalar , fcutar , incline* jMatriz, 

-1?: Horizontal -4S.D00 |^)|| dH 9 
□ 
□ 



lS ifertical 



0 s 0OO 



_ Aplitar a cada objeto por MpaTado 
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Anada un nuevo rectangulo para eliminar la parte central. No olvide despues usar Objeto/Alinear y 
distribuir para conseguir que quede colocado con exactitud. Despues seleccione los dos 
rectangulos y haga la linea Trazo/Diferencia. Coloque el objeto resultante en el sitio adecuado y 
despues seleccionelo junto con el cfrculo y repita Trazo/Diferencia 




Llegados a este punto no debemos dejar esta practica sin revisar la anterior y terminarla 
correctamente. Ahora ya sabe que no tenia que agrupar los dos triangulos iniciales sino hacer 
Trazo/Unidn; de esta manera se evitan esas Ifneas de union tan desagradables (y que no debenan 
aparecer -esperemos que la proxima version de Inkscape arregle estos pequenos problemas-) Por 
lo demas el proceso puede considerarlo como correcto. El resultado debe ser este: 




En proximos tutoriales vamos a trabajar las operaciones booleanas en logos mas complejos pero 
recuerde que ya tiene el conocimiento necesario para comenzar a experimentar. 
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Loqo 4: Ordenando obietos en reiilla 



En esta ocasion vamos a trabajar con un nuevo metodo para ordenar objetos de una manera 
controlada. Se trata de ordenar objetos de una manera armonica dentro de una supuesta red 
modular de filas y columnas en la que los espacios pueden ser editables. Para la practica vamos a 
copiar un logotipo en el que los objetos estan ordenados dentro de una rejilla de 2x2. Este logotipo 
se puede conseguir sin problemas utilizando recursos que ya se han estudiado en practicas 
anteriores pero nos sirve muy bien para que usted entienda la filosofia de trabajo del recurso en 
cuestion. Este es el logotipo (una maravilla, si se me permite una critica personal) 
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Antes de comenzar solo tengo que anadir que la tipografia que voy a usar es lo mas parecido que 
he encontrado despues de darme una vuelta por la red. No he dedicado mucho tiempo asf que es 
posible que usted disponga en su carpeta C:/WINDOWS/Fonts de una fuente que se le parezca 
mas. Yo voy a usar una denominada Geo Sans Light (freeware) y que usted puede descargar de 
aquf: http://www.dafont.com/geo-sans-light.font 
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Comenzamos el logotipo haciendo un cuadrado colocado correctamente encima del superior 
izquierdo del modelo; luego haga tres duplicados asegurandose de que ninguno de ellos queda 
mas alto ni mas a la izquierda del original (asf se garantiza que este no se mueve a la hora de 
ordenar en rejilla) 
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IGN 




Seleccione los cuatro cuadrados y haga la linea de comandos Objeto/Ordenar en rejilla... Esto 
hara aparecer un cuadro con las opciones necesarias. Los datos son, logicamente 2 filas y 2 
columnas (use las flechas para subir y bajar los valores, si los introduce con el teclado a veces se 
produce un bug -error de programacion-) Conserve el resto de las opciones y valores tal cual para 
hacer un primer tanteo del resultado. 




Todo ha salido correcto a excepcion de la separation horizontal y vertical de los elementos. Las 
dos casillas inferiores hacen referenda a este espaciado. En nuestro caso 15.0 unidades es 
demasiado. Corrijalo y vuelva a Aplicar. En el ejemplo basto con 9.0 
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Pasamos a la edicion de los colores. Seleccionamos los dos cuadrados negros y les aplicamos las 
propiedades de color correspondientes tanto al relleno como al borde. Despues seleccione los 
otros dos y pongales relleno bianco y trazo negro. Despues regule el grosor. 




Es el momento de duplicar los cuadrados negros y desplazar los duplicados (a la vez) un poco a la 
derecha y hacia abajo para hacer el efecto de la sombra. Una de las grandes novedades de 
Inkscape en su version 0.45 fue la posibilidad de conseguir efectos de desenfoque (blur). 
Veamoslo en accion. Saque el cuadro de Relleno y borde y aplique desenfoque y disminuya la 
opacidad maestra de los objetos que estan preparados para la sombra (lo logico seria haberlos 
mandado al fondo con Objeto/Bajar al fondo, detras de los cuadrados negros que van a quedar sin 
desenfocar pero las caracteristicas de color nos pueden permitir dejarlos encima- yo los he 
colocado debajo, aunque solo sea por coherencia fisica-) 
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No agrupe de momento. Vamos a necesitar los cuadrados para alinear los textos dentro. 
Con la herramienta de texto escriba CON y desde Texto/Texto y tipografia elija la fuente 
adecuada. Cierre el cuadro y despues coloquelo en su sitio (si le cambia el tamano hagalo con 
CONTROL pulsado para no deformarlo) y dele un grosor al trazo (recuerde ese grosor puesto que 
tendra que asignarselo luego al resto de los textos). Todo ello con color bianco tanto para el 
relleno como para el borde. Despues use Alinear y distribuir... 



CON 









Seleccione de nuevo el texto y regrese al cuadro Texto y tipografias. Ahora es el momento de 
definir esta tipografia, con el tamano adecuado, como predeterminado. 
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Ahora puede escribir las otras tres partes de texto con absoluta garantfa de precision. Ajuste 
colores y el grosor del trazo para que queden iguales que el de CON. 
Pero ahora hay que prestar atencion a algo importante. Imagino que no le habra pasado 
desapercibido que todos los textos tienen igual ancho en el logotipo original y los que ha escrito 
usted, no. Vamos por tanto a igualar. Pare ello seleccione CON y haga la linea de comandos 
Edicion/Copiar. Despues seleccione los otros tres textos y haga Edicion/Pegar tamaho... /Pegar 
ancho por separado 



Deshacer: Grupo 

# Rehacer 

Cjjp Historia de deshacer. . . 
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Mayus.+Ctrl+Z 
Mayus.+Ctrl+H 
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Ctrl+V 
Ctrl+Alt+V 
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Ctrl+Alt+A 


Invertir seleccion 


! 


:Q\ Deseleccionar 





0 Editor XML. . 



Mayus.+Ctrl+X 



Pegar ancho 
Pegar altura 

Pegar los tamanos por separado 



Pegar ancho por separado 



Pegar altura por separado 




Despues de usar las herramientas que ya se estudiaron en practicas anteriores relativas a Alinear 
y distribuirun resultado aceptable podria ser el siguiente: 




Solo un detalle mas. Para la exportacion en mapa de bits del logotipo se va a producir un 
problema con el desenfoque de abajo y de la derecha. Si usted exporta el grupo tal y como queda 
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seleccionado se producira este efecto: 
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Area de exportation 



Pagina 
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Seleccion Personalizado 
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Tamano del mapa de bits 
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: pixelesa 89.42 
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Nombre del archivo 



C:\Documentsand5ettings\Escritorio\gl0216 | Examinar... | 
^ Exportar 




opieaaaes aei aocumento [May us. 



Pagina Rejilla/Guias Ajuste 
General 



Unidades predet,: px 



Jl 



Color de fondo: WMMM 



Tamano del papel 



Orientacion del papel: 
Tamano personalizado 
Ancho: 1744.09 



A4 


210.0 x 297.0 mm 


US Letter 


8.5 x 11.0 in 


US Legal 


8.5 x 14.0 in 


US Executive 


7.3 x 10.5 in 



V 

0 Vertical Q Horizontal 



Altura: 1052.36 



Borde 

[^1 Mostrar borde del papel 
I I Borde encima del dibujo 
[^1 Mostrar sombra del papel 

Color del borde: 



Esto es debido a que el efecto de desenfoque va mas alia de la caja de seleccion. Hay varias 
opciones para solucionar esto. Una de ellas es anadir un rectangulo sin relleno y sin contorno al 
grupo formado por el logotipo y asegurar asi que el desenfoque queda dentro de la caja de 
seleccion. Otra es hacer el mencionado rectangulo y, teniendolo seleccionado, ir a 
Archivo/Propiedades del documento... y en la pestana Pagina presionar el boton Ajustarla pagina 
a la seleccion. 

Una vez hecho esto, a la hora de exportar podemos escoger la opcion Pagina con garantfas de 
que queda al tamano que hemos decidido nosotros y con el desenfoque sin originar problemas. 
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Loqo 5: Editando cuatro nodos 



Para ponerle tftulo a esta practica reconozco que le he dado unas cuantas vueltas. Queria 
transmitir lo importante que es la sencillez a la hora de plantearse un diseno. El logotipo que 
vamos a realizar es quiza la mejor prueba de lo que estoy hablando. 



Todos los ejercicios que hemos realizado hasta ahora se componian de los objetos que propone 
Inkscape como predisenados (rectangulos, elipses...) Este logotipo es imposible conseguirlo 
mediante este tipo de figuras denominadas primitivas (al menos en el mundo 3D); es necesaria 
una deformacion que va mas alia de estirar los transformadores. Como ya se hablo en Logo: 0 
Filosofia de trabajo vamos a crear este logotipo editando los nodos. 
Comenzamos por seleccionar la herramienta para crear curvas de Bezier y lineas rectas y 
hacemos un cuadrilatero contorneando el logo de referenda. Para hacer lineas rectas haga 
simples dies y no arraste el raton, de lo contrario se generaran curvas. Asegurese de poner el 
ultimo nodo encima del primero (para ello Inkscape rellenara el punto inicial de color rojo) De 
momento no se preocupe de la precision. 
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La figura resultante es un objeto con contorno y sin relleno. Pasemos a edition de nodos con la 
segunda de las herramientas. Desde la barra de opciones para esa herramienta convierta TODOS 
los nodos en curvos a la vez (de un modo general, todos se convierten en nodos de esquina y se 
haran visibles los tiradores de todos los nodos); despues dos de los nodos hay que convertirlos en 
nodos suavizados (esto sena definir los nodos de un modo particular) 




i i 

Si Inkscape no le muestra los tiradores asegurese de tener activado el ultimo boton del menu de 
opciones 




En la siguiente ilustracion se muestra el resultado. Tambien se ha cambiado en color de relleno, 
se ha eliminado el borde y se ha bajado la opacidad para que se aprecie mejor el modelo. 
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Es la hora de comenzar a "dibujar". Aqui entran en juego sus conocimientos sobre tangencias. 
Una ordenacion convincente seria esta: 




Con el color de relleno apropiado ya tiene usted su logotipo en vectores. 




Se habra dado cuenta de que para convertir los nodos en curvas o definirlos como esquinas, 
suavizados... no le he mencionado linea de comandos. La razon es que no existe. 

En realidad los logotipos basados exclusivamente en edicion de nodos se hacen igual que este 
pero multiplicando el trabajo. Trate de arraigar una filosofia de trabajo basada en la econorma 
de nodos. Cuantos mas nodos use mas tangencias se produciran y mas impreciso puede llegar a 
parecer su dibujo. 
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No quiero abandonar este tutorial sin dejarle un resumen de las propiedades y posibilidades de los 
tres tipos de nodos que hay aunque aqui solo hemos usado dos. 

Nodo de esquina 



• Es un nodo en el que NO se origina tangencia por lo que la entrada y la salida de las curvas 
queda quebrada. 

• La intensidad de entrada y de salida (longitud de los tiradores) puede ser distinta. 

• Si se quieren mover los dos tiradores a la vez para conservar el angulo hay que mover uno 
con SHIFT pulsado. 

• Si se mantiene ALT pulsado se puede mover un tirador pero se conservara su longitud. 

• Como ya se menciono en otro tutorial, si se edita con CONTROL pulsado los saltos son de 
15° (a no ser que se especifique otro angulo en Preferencias de Inkscape) 



Nodo suavizado (asfmetrico) 



• La entrada y la salida de las curvas se hace de manera armonica con un enlace tangencial. 

• Su principal carectenstica es que la fuerza de entrada y la de salida (longitud de los 
tiradores) no tienen por que ser iguales (por eso la denomino asimetrica) 

• ALT pulsado tiene las mismas consecuencias que en el de esquina, igual que CONTROL 
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Nodo suavizado simetrico 




• Se comporta iguar que el asimetrico pero en este caso tiene la restriction de tener la fuerza 
de entrada y de salida exactamente iguales por lo que los tiradores son de la misma 
longitud. 

• ALT tiene el mismo efecto que en los casos anteriores, igual que CONTROL 
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Loqo 6: Alineando nodos 



Vamos a realizar en esta practica, y de dos modos distintos, un logotipo extremadamente sencillo 
que servira para comprender nuevos recursos a la hora de trabajar con nodos. 




METODO 1 

Partiendo del metodo puesto en practica en el tutorial anterior vamos a basar la precision de 
nuestro ejercicio en el cuadro Alinear y distribuir desde edicion de nodos. Comenzamos por crear 
la geometna aproximada de uno de los elementos con la herramienta de curvas de Bezier y lineas 
rectas. Recuerde que para obtener los segmentos rectos debe hacer die sin mover el raton, de lo 
contrario se crearan nodos suavizados. 




PROYECTO BIG-CURSO DE INKSCAPE-EL BLOG DE JOACLINT ISTGUD 



En la anterior ilustracion he enumerado los nodos para poder hacer referenda a ellos sin que haya 
confusion a partir de ahora. 

Edite los nodos 1 y 3 para que queden "correctamente" colocados segun el modelo. Despues 
seleccione los dos y asegure la precision con la Ifnea de comandos Objeto/Alinear y distribuir 



A Li near y distribuir (May lis. ^ tt. _ . X 



Mi 



De este modo han quedado colocados en la misma horizontal. 

Ahora seleccione los nodos 1 , 2 y 3 y con el mismo cuadro Alinear y distribuir haga que las 
distancias verticales entre puntos sean constantes. 



Alinear y distribuir (Mayus.+Ct... X 



Nodos 



OD-Q 




Seleccione, EN ESTE ORDEN, el nodo 4 y despues el 2; y haga que esten en la misma vertical. 
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El orden es importante. Tenga siempre en cuenta que el ultimo nodo seleccionado sera el que 
quede fijo, los demas nodos se moveran. 

Desplace los dos nodos 2 y 4 verticalmente con CONTROL pulsado para anclar el desplazamiento 
al eje Y 

Si todo ha salido correctamente tiene que tener un contorno preciso y ajustado al original. En el 
ejemplo se ha rellenado de color y se ha eliminado el contorno del objeto. 




Seleccione el objeto, dupliquelo y desplacelo con CONTROL pulsado hacia abajo para colocarlo 
en el lugar adecuado. Despues seleccione los dos objetos y haga Trazo/Union. Considero que en 
este caso es mejor unir que agrupar porque esto permitina en el futuro hacer una resta entre el 
cuadrado y los objetos y asf ajustar el color de estos al color que hubiera de fondo. 
Despues solo queda hacer algo que a lo que esta acostumbrado: aplique color bianco al objeto 
resultante, cree el cuadrado, aplique el color con la herramienta Seleccionar colores medios de la 
imagen, haga la alineacion correctamente y agrupe. 



7$ 
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METODO 2 

El metodo anterior es completamente correcto pero vamos a ver un nuevo metodo para poder 
estudiar conceptos nuevos. Yo, personalmente, optana antes por este metodo. 
Saque a escena un triangulo con su lado inferior correctamente horizontal (CONTROL pulsado) y 
ajuste las esquinas a la figura original. 




Convierta el objeto en trazo y seleccione los dos nodos de abajo. En la barra de opciones 
encontrara un icono con un simbolo + que anadira un nodo extra justo en el medio entre los dos 
nodos seleccionados. 




* i - 
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Ahora puede seleccionar ese nodo y desplazarlo en la vertical hasta su lugar adecuado. A partir 
de ahi se continuana con el mismo procedimiento descrito mas arriba. 

Tambien podna haber anadido este nodo a ojo haciendo doble die en el lugar que quisiera ponerlo 
y despues hacer los ajustes necesarios. 

Pero se trata de optimizar el trabajo, por eso yo optaria por el segundo metodo. 
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Loqo 7: Dividiendo v cortando trazos 



Ya vimos en practicas anteriores las booleanas mas comunes (Union y Diferencia); en esta 
ocasion vamos a abordar la resolucion de un logotipo en el que la operation fundamental sera la 
Division. Esta es la propuesta: 




Antes de entrar de lleno a la resolucion del logotipo vamos a detenernos a explicar como trabaja la 
operation booleana Division (y de paso, algun detalle sobre Cortar Trazo) 
Como en todas las boolenas la figura que esta situada mas abajo es la que actua como 
dominante, es decir, sera la que se quede en escena una vez realizada la operation. Para que la 
booleana Trazo/Division funcione correctamante las dos figuras deben ser entendidas por 
Inkscape como figuras cerradas (o que se pueden cerrar) 

• Si se trata de segmentos rectos, el segmento del corte debe tener al menos tres nodos: 
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• Si el elemento de corte es curvo, puede tener solo dos nodos porque Inkscape podra cerrar 
la figura internamente (en el ejemplo se ha dado relleno al elemento de corte para 
demostrar como Inkscape puede considerarlo un objeto cerrado, aunque entendera que el 
ultimo segmento no existe y no lo queremos usar en la operacion) 




• Si el elemento que va a ser dividido no esta cerrado Inkscape no solo lo cerrara sino que 
ademas creara los segmentos necesarios para ello. 




En este caso es muy probable que lo que se esperaba era cortar el trazo sin semejantes 
consecuencias. Precisamente para eso existe la opcion Trazo/Cortar trazo. Funciona 
exactamente igual que la division pero no cierra la figura. En esta operacion desaparece el 
relleno de la figura en el caso de que la tuviera (cuidado al realizar esta operacion en una 
figura sin color de trazo porque puede dar la sensacion de que desaparece de escena) 
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Una de las mejores opciones y que no da lugar a ningun tipo de duda es usar dos formas cerradas 
como en el caso que sigue: 




Posiblemente ha sido una introduction un tanto larga para esta practica pero creo conveniente 
dejar claros estos conceptos ya que el recien llegado suele pensar que Inkscape "hace lo que 
quiere" cuando estamos haciendo este tipo de operaciones. Un dominio de los conceptos que se 
aplican al utilizar estas operaciones garantiza un manejo fiable de la herramienta que tenemos 
entre manos 

Empecemos por tanto con nuestro logotipo en cuestion. 

Esta compuesto, aparentemente, por dos objetos pero un analisis mas detallado debe llevarnos 
rapidamente a la conclusion de que eso dependera de si la parte blanca sobre el cuadrado es 
blanca por definition o si es transparente y tomara el color del fondo. Nosotros aqui entenderemos 
que esta zona debera presentarse siempre como blanca independientemente del fondo. Para 
Inkscape el logotipo estara formado por seis objetos: dos negros, tres blancos y uno verde. 
Cuando se hagan las uniones necesarias estos seis objetos seran reducidos a tres. 

El metodo para conseguir este logotipo conecta perfectamente con el de practicas anteriores. 
Comience por seleccionar la herramienta para crear curvas de bezier y lineas rectas y genere la 
forma de la espiral con segmentos rectos. En la siguiente ilustracion a la forma resultante se le ha 
bajado la opacidad y se le ha eliminado el contorno. 
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Seleccione todos los nodos y conviertalos en curva, despues seleccione los ocho centrales y 
conviertalos en suavizados asimetricos. Aprovechando que tiene esos ocho nodos seleccionados 
use el cuadro de Alineal y distribuiry asegurese de esten alineados en la misma vertical (aunque 
no considero esto extrictamente necesario en este caso). Despues es el momento de comenzar a 
dibujar. Edite los tiradores hasta conseguir una geometria similar a la del modelo. 




Es el momento de crear el rectangulo... Despues dupliquelo, cambiele el color (para poder 
distinguir despues cual es el que tiene seleccionado) y mandelo al fondo. Recuerde que cuando 
hagamos la operacion de division el cuadrado va a desaparecer, pero lo necesitamos para el logo. 
Por eso hay que duplicarlo ahora. 

Seleccione el cuadrado de arriba y la forma espiral y realice la boolena Trazo/Division (ya sabe 
que en la parte inferior izquierda de la interfaz se le dan los datos sobre el color del relleno y del 
borde del objeto seleccionado. Use esa informacion para saber cual es el cuadrado que tiene 
seleccionado para la booleana). El resultado... 
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Puede apreciarse el conjunto de objetos resultante en la espiral y como se conserva el cuadrado 
que estaba duplicado abajo. 

Es el momento de comenzar a hacer Trazo/Union con los objetos que tienen iguales propiedades 
de color (ademas de darles el color correspondiente). Para dar el color verde al cuadrado use el 
cuentagotas para tomar la muestra de color del logotipo original. 
Por ultimo agrupe los tres objetos. 
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Loao 8: Gradientes de dos colores 



En esta practica vamos a empezar a incluir colores en forma de gradiente. El gradiente mas 
sencillo sera aquel que hace el degradado entre dos colores y es el que se va a tratar en este 
tutorial. En Inkscape a los colores que forman un gradiente se les denomina Paradas. Para 
nuestra practica este es el logotipo: 




Vamos a realizar primeramente la geometna, que sin ser excesivamente compleja presenta 
algunos inconvenientes si queremos hacerla con precision. Comenzamos por hacer el circulo que 
formara la esfera. Recuerde que siempre tiene que tener CONTROL pulsado para no perder la 
proportion. Despues duplfquelo y escalelo con CONTROL y SHIFT pulsados para obtener el 
circulo que cortara la parte rectangular por la parte estrecha; y por ultimo repita la operation para 
obtener el circulo que cortara al rectangulo por la parte ancha. El resultado sena este: 
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En la imagen se han creado tres cfrculos a pesar de que el que esta superpuesto a la esfera no se 
aprecie bien. Es el momento de editar el cfrculo grande. Asegurese de tener el cfrculo en modo de 
edicion de tiradores y desplace con CONTROL pulsado un tirador circular hacia arriba dos saltos 
de 15° 

MUY IMPORTANTE: 

• Digo un tirador ya que nada mas que desplace el unico que aparece en escena, dejara ver 
un segundo tirador circular. 

• El cfrculo se ha abierto pero puede ser "cerrado" de dos formas distintas (esta opcion se 
puede editar desde las opciones de le herramienta de Elipse pero es mejor hacerlo en 
tiempo real...): 




(la version 0.46 incorporo un nuevo icono que simplifica aun mas las cosas) 



• Para conseguir uno de los efectos anteriores en tiempo real dependera de si usted mueve 
el cursor del raton, durante la edicion, por fuera o por dentro de la figura. En este caso nos 
interesa editarlo moviendo el raton por fuera de la figura. 



Una vez comprendido esto es el momento de continuar. Ya tiene editado el primer tirador con 
CONTROL pulsado para hacer saltos de 15°. Ahora edite el segundo tirador, tambien con saltos 
de 15° (recuerde llevar el cursor del raton por el exterior del cfrculo), hasta llegar a la posicion 
adecuada respecto al original. 
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Para realizar la booleana de diferencia entre este objeto y el circulo mediano hay que hacer un 
ajuste antes: mandar el sector circular al fondo para que sea el objeto dominante en el momento 
de hacer Trazo/Diferencia. Despues solo tiene que hacer la resta: 




Una de las consecuencias de la booleana es que el sector circular es convertido inmediatamente 
en trazo con lo que nos ahorramos el paso Trazo/Objeto a trazo. La parte exterior de nuestra 
forma es circular pero la del logotipo es recta. Seleccione los dos nodos implicados y escoja en los 
iconos de opciones Convertir los segmentos seleccionados en lineas: 
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Comencemos por la zona rectangular. Seleccionela y haga la linea de comando (o use el icono 
adecuado) Objeto/Relleno y borde. El objeto con el que estamos trabajando no tiene borde y 
escojemos en la pestana Relleno la opcion Gradiente lineal: 
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Relleno y bcrde (Mayus^Ctrl. 



aelefiP Color d e Kr w ^ Eatjo dg fraro j 









- X 



x □ □□□ ? 

Gradiente lineal ~ 

linearGradient3395 I 



Dupicar 



Editar, 



Repel*! | nhguno 



3- 



0.0 



ad maestra, % 

• — - -am | 1 



Inmediatamente Inkscape fabrica un gradiente de dos colores; pero como no puede elegir el 
segundo color al azar, lo que hace es que el primero se repita pero transparente: 






- 




- 


- 


- 


















] 


1 








Jul 



Ahora haga die sobre la herramienta Crear y editar gradientes. Sobre nuestra figura aparecera un 
segmento que representa el origen y el final del gradiente. Como si se tratase de unos nodos, 
coloquelos en los lugares de inicio y de final del gradiente . Coloquelos adecuadamente(se puede 
hacer con saltos de 15° pero no creo que la exactitud aquf haga variar mucho el resultado) 




Seleccione la herramienta Seleccionar colores medios de la imagerr, seleccione despues con esa 
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herramienta uno de los nodos del gradiente y tome la muestra de color del original; repita lo mismo 
con el otro nodo del gradiente. Comprobara que Inkscape hara que el color transparente deje de 
serlo entendiendo en un principio que usted prefiere comenzar por dos colores opacos. 




Es el momento de seleccionar el circulo y aplicarle un gradiente radial. En este caso cuando haga 
visibles los nodos del gradiente notara una pequena diferencia: 



Relleno | r C olor de traz o [ ESEstib de trazo 




El gradiente consta de tres nodos. Es importante que si quiere conservar el gradiente sin 
distorsionar mantenga los dos brazos del gradiente de la misma longitud. Siempre que manipule 
uno de los extremos hagalo con CONTROL y SHIFT pulsados. Coloque el gradiente en su lugar y 
tome las muestras de color tal y como se explico mas arriba y obtendra esto: 
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Solamente queda insertar el texto. Yo voy a usar una tipografia que ya se uso en la practica Logo 
4; no es del todo apropiada pero se ajusta lo suficiente. 




NOTA FINAL: Dependiendo de las Preferencias de Inkscape que tenga usted puestas al 
programa, es posible que la proxima vez que haga una Elipse/Cfrculo le saiga a escena 
como el ultimo creado. Para corregir esto solo tiene que hacer die en el boton Completar en 
las opciones de esta herramienta Elipse: 



c 



Cambio: Inicio: 



0.000 



Fin; 



323. 40£ 



I I Arco abierto Completar 



68 



PROYECTO BIG-CURSO DE INKSCAPE-EL BLOG DE JOACLINT ISTGUD 



Logo 9: Recortando bitmaps 



Es posible que si en sus practicas con Inkscape ha importado un bitmap se le haya ocurrido la 
idea de aplicarle una booleana del tipo Diferencia para recortarlo. Si es asi ya sabra que la 
operacion en cuestion no funciona. Sin embargo el programa ofrece algunas alternativas para 
poder editar bitmaps una vez importados a la escena. Este es nuestro logotipo para esta practica: 




El planeta es muy probable que no este creado con un editor vectorial sino con un programa de 
diseno 3D. Yo lo que he realizado es extraerlo del logo, reconstruir alguna zona y aplicarle un 
fondo, todo ello con Gimp. 




El recurso que vamos a utilizar para aislar el planeta se encuentra en la Ifnea de comandos 
Objeto/Clip. Un clip funciona como una operacion booleana Trazo/Diferencia, es decir: 

• Se necesitan dos objetos (en el caso de clip el dominante puede ser un bitmap) 

• El objeto que se encuentre debajo actuara como dominante y se quedara en escena 
despues de realizar la operacion. 

• El excedente eliminado se convierte en transparente. 
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Asi que lo que necesitamos es crear un objeto que "tape" por completo el planeta. De la calidad de 
ese objeto dependera que el clip resulte creible. 




El resultado anterior es consecuencia de: 

1 . Trazo/Diferencia entre la elipse grande y la pequena 

2. Trazo/Union entre el objeto resultante y los dos circulos 

En este momento podemos seleccionar el objeto para el clip y el bitmap y hacer la linea de 
comandos Objeto/Clip/Aplicar 



^ Relleno y borde... 


Mayus.+Ctrl+F 


Propiedades del objeto. . . 


Mayus.+Ctrl+O 


j5 Agrupar 


Ctrl+G 


^ Desagrupar 


Mayus.+Ctrl+G 


Clip 




Mascara 




Patron 


► 


W* Elevar 


PgUp 


*4 Bajar 


PgDn 


H Traer al frente 


Home 


i| Bajar al fondo 


End 


Rotar 90° a la derecha 




£t Rotar 90° a la izquierda 




J!L Reflejo horizontal 
* Reflejo vertical 


H 

V 


Transformar... 


Mayus.+Ctrl+M 


'tf Alinear y distribuir... 


Mayus.+Ctrl+A 


SS Ordenar en rejilla... 





70 



PROYECTO BIG-CURSO DE INKSCAPE-EL BLOG DE JOACLINT ISTGUD 



Al hacer la linea de comandos se habra fijado en la posibilidad de Liberar. Es una de las opciones 
que puede aplicar en el momento que usted considere oportuno, recuperando los dos objetos 
originales. 

Continuando con nuestro logo, solo queda anadir el texto. La fuente: Arial Black. 

Ya se dieron algunas nociones sobre insertar textos y dejarlos como predeterminados; usaremos 
de nuevo ese metodo. 

Escriba la letra a con la fuente indicada y ajuste el tamano; despues haga que esa tipografia sea 
la predeterminada. 




Escriba los otros dos caracteres de una manera independiente. 
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Inkscape cuenta con una opcion especial para alinear correctamente tipograffas ya que es posible 
que con una alineacion de los lados inferiores de las cajas de seleccion no valga (imagine una a y 
una j minusculas) Esta opcion tambien se encuentra en el cuadro Alinear y distribuir. Recuerde 
que debe seleccionar la a en ultimo lugar para que sea la que se quede quieta al hacer la 
alineacion. 



Alinear y distribuir ( Mayus «(.".. . 



Alinear 

P.elativu as Selene en 



n£L n W infl ^ ^ 



Distribuir 



Eirnhar Falaparnientos 



H: 0.D 



Disposcion de cane c bar bs 



Despues desplacelas con CONTROL pulsado hasta su lugar correspondiente; seleccione las tres 
letras y rellenelas de negro. NO las agrupe. 

Ahora escriba una p y haga los ajustes de posicion y tamano. Luego haga doble die sobre la letra 
y complete el texto powered (con dos espacios entre cada letra) 
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No se preocupe por los desajustes porque a continuacion vamos a realizar una operacion que ya 
hicimos en otra practica: igualar los anchos de los textos. Para ello, seleccione las tres letras atm 
y haga la linea de comandos Edicion/Copiar, luego seleccione el texto powered y haga la linea de 
comandos Edicion/Pegar tamano/Pegar ancho. 

aWm 

powered 

at m 

powered 



Recupere el bitmap con su clip, coloquelo en su sitio con los ajustes de tamano necesarios y 
mande al fondo la letra m para que el planeta quede delante (por eso le dije antes que no 
agrupara) 

Ahora necesitamos agrupar las letras atm y el planeta para poder realizar la operacion de correcta 
alineacion entre el texto de arriba y el de abajo. Ya sabemos que miden lo mismo pero de 
momento no tenemos garantia de una correcta alineacion. Use el cuadro Alinear y distribuir. 
Para terminar solo le queda enviar el texto powered al fondo para que quede tapado por el 
planeta y agrupar todo el conjunto. 



at^m 

p o wre red 
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Para una mejor imitacion yo he anadido al texto powered un contorno de ancho 1 .000 



0 Rfilleno y borde (May us. + Ctrl... 




□ 




Relleno 


r Color de trazo 


i^Estilo de trazo 





Ancho: 
Union: 



1.000 



px 



NOTA IMPORTANTE: respecto al bitmap que ha incluido en el SVG se plantea una cuestion 
tecnica. Si la mueve de su lugar de origen o le cambia el nombre, Inkscape no lo encontrara 
cuando vaya a buscarlo y le enviara una imagen con enlace roto. Tiene dos soluciones: 

• Colocarlo al lado del SVG antes de importarlo y tenerlo a mano 

• Incrustarlo con Efectos/lmagenes/lncrustar todas las imageries. El SVG ocupara mas bits 
pero se podra despreocupar del archivo bitmap. 
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El logotipo de esta practica puede realizarse de varias formas, todas ellas efectivas. Este tutorial 
vamos a aprovecharlo para poner en practica la booleana Exclusion y algun otro recurso mas, 
como combinar y descombinar objetos formados por varios trazos. Esta es la propuesta: 



La parte grafica del logotipo se compone de cuatro elementos de color naranja. Con nuestro 
conocimiento de edicion de nodos podnamos conseguir un trazo bastante fiable pero trataremos 
de afinar un poco mas el procedimiento. 

Parece que el origen del logo esta en esa circunferencia perfecta en su lado izquierdo y 
deformado en el derecho, asf que comencemos por ella. 

Una vez colocada segun la parte izquierda, se convierte en trazo y se desplaza el nodo de la 
derecha hasta imitar al original en la zona de abajo 





artebinario 



publicidad+disefio 





artebinario 



cnad+diseno 
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Anadimos dos nodos extras haciendo doble die en los puntos clave del diseno, tal y como muestra 
la siguiente imagen: 




Esto nos permitira definir con precision esa zona del arco. Para ello lo primero que debemos hacer 
es que el nodo de abajo sea "de esquina" para garantizarnos que no nos altera lo que ya tenemos 
definido. 




Pasemos a la segunda de las figuras que componen el logo. En la siguiente imagen he 
comenzado por una elipse, inclinandola y ajustandola todo lo que he podido al contorno de la 
izquierda (tal y como ocurna en el cfrculo) con objeto de que esta parte quede lo mas precisa 
posible, que es el motivo por el que no he abordado este logo con edicion de nodos desde el 
principio. Despues he editado el nodo de la derecha y anadido alguno mas. Observe los nodos 
que he convertido en esquina para poder hacer ese efecto "extrano" de la derecha y asi 
asegurarme de que se corta al circulo tanto arriba como abajo. 
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Es el momento de seleccionar los dos objetos y hacer Trazo/Exclusion. Con esta operation 
conseguira que Inkscape elimine la parte comun a los dos objetos. En esta booleana el resultado 
geometrico es el mismo independientemente de cual sea la figura que esta debajo. Para lo unico 
que hay que tener en cuenta este detalle es para la herencia del color. En la ilustracion siguiente 
le presento la booleana alterando la ordenacion de los dos objetos: 
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Cualquiera de los dos nos sirve para proseguir. Es evidente que el objeto resultante cuenta con 
dos elementos de sobra. La eliminacion de nodos no nos conducina a nada. Cuando tenemos un 
objeto formado por varios trazos independientes entre si, decimos que estan "combinados". Para 
poder eliminar los trazos en cuestion debe hacer la Ifnea de comandos Trazo/Descombinar. Esto 
le originara seis objetos independientes entre si. 



£ 3 £b]eto a trazo 




f Bor de a trazo 


ODrl+AlfrK: 


iP 1 vet&orlzar rnapa debits, 




O Union 




& Diferenda 


ctih 


Jntetseccrin 


ClrH-* 


\Q Elusion 


Ctrl-H* 


a- Division 


Ctrl+/ 


|© Qqt tar braco 


CM+M4/ 


fjp Combhar 






Reducir 


Chi l( 


\ AQipliar 


ark) 


% Desvfo dinlfinKo 


QrifJ 


^ Dcsvia cnJpzcdo 


Ctrl+AlttO 


S Simplifies 


ttrt+L 


~+_ RevBrtir 






Seleccione los dos objetos que desea eliminar y despues vuelva a combinar los cuatro que forman 
el logo (no hay ningun motivo para que esten independientes. Tambien podna agruparlos puesto 
que ya no vamos a editar ningun nodo mas. Tome una muestra de color del original y copie ese 
color en su vectorizacion. 
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Este es el metodo que mas que convence porque pienso que es el que mas respeta la geometna 
"pura" de la parte izquierda del logo, pero vamos a ver alguna posibilidad mas de llegar a 
resultados convincentes; por ejemplo, usando solo un circulo para toda la figura y consiguiendo un 
efecto de "falsa booleana". 

Haga el circulo y conviertalo en trazo; despues es el momento de comenzar a anadir nodos con 
doble die (los primeros, en los limites del logo) 




Al mover uno de esos nodos interiores hacia afuera del circulo inicial se producira un efecto 
parecido al de la exclusion... 
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Puesto que usted ya sabe donde hay que poner los nodos de esquina y donde los suavizados, 
solo le queda determinar su distribution. Le recuerdo que debe hacer siempre este trabajo con 
una mentalidad de "economia de nodos" en beneficio de la claridad de su dibujo. Por ejemplo... 




Solo queda anadir el texto. Si busca por la red puede encontrar much isi mas fuentes de tipo 
pixel/bitmap. Sin animo de imitar al 100% la fuente exacta yo voy a usar Adore64 y Aerial (ambas 
son freeware) que puede descargar de: 

http://www.urbanfonts.com/fonts/Adore64.htm 
http://www.urbanfonts.com/fonts/Aerial.htm 



ABCDEFGHIJKL MH OPQRSTUU MX V Z 
abcdefghi jkl MR opqrstuv wx y z 



bcdepg 



HJKLMNRDRSTUVWXVZ 
hykmnnpqr5tuvLuxyz 
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El resultado definitivo usando esas fuentes serfa este: 




NOTA: Este seria en mejor momento para ir a la parte de anexos y realizar el Examen 1, 

puesto que el siguiente tutorial comienza haciendo referenda a el. 
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Logo 1 1 : Gradientes de mas de dos colores 



En esta practica vamos a hacer un logo que nos debe resultar familiar puesto que formo parte del 
Primer examen. Lo que ocurre es que vamos a hacer una version 3D que incluye muchos de los 
conceptos tratados hasta este momento. 




Puede parecer que se trata del mismo logo pero no es asf. Digamos que aquella era una version 
en negarivo y esta una version en positivo. Las novedades se encuentran en ciertos aspectos del 
proceso y en la inclusion de gradientes de mas de dos colores. 

Comenzamos por realizar la parte geometrica formada por la V y la W tal y como se explico en la 
practica explicativa del primer examen. En este caso vamos a incluir algo de edicion de nodos a 
los triangulos iniciales para dar curvatura a algunos bordes y aumentar la sensacion volumetrica. 
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Por lo demas el arranque del ejercicio es igual que en lo ya explicado. Una vez conseguida la 
primera V al duplicado apliquele la linea de comandos Objeto/Reflejo horizontal (esto no era 
necesario en la otra version del logo) 




Una vez hecha la resta del segmento transversal es el momento de eliminar lo sobrante. Para ello 
es necesario crear el objeto necesario para la resta... Primero un circulo de un tamano que quede 
en el interior de la corona que sirve de Ifmite a las letras: 




Y ahora ese circulo se lo restamos a un rectangulo (o circulo...) que tape a todo lo anterior: 
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No nos hemos preocupado en absoluto de la precision en este corte porque ahora vamos a crear 
la corona y se la vamos a sumar. Hacemos el circulo exterior y el interior y hacemos la resta... 
despues la suma de la W con la corona. 




Vamos a necesitar este objeto tres veces: uno para la parte frontal al que hay que anadirle una 
corona circular extra; otro para crear el bisel que le dara sensacion de grosor al logo; y uno mas 
para crear el efecto de sombra. A cada uno dele un color para luego poder seleccionarlos sin 
dificultad. 



Creamos la corona exterior del mismo modo que la otra y hacemos la union. 




Damos este objeto por concluido (solo le falta el color) Seleccionamos la W de abajo (recuerde 
que para seleccionar "hacia abajo" debe tener pulsado ALT; de todos modos puede hacer una 
seleccion ordenada con la tecla Tabulador hasta llegar al objeto que desea) Este objeto lo vamos 
a reducir con CONTROL y SHIFT pulsados para crear el bisel. 
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El asunto va tomando color. Seleccione todos los objetos y agrupelos (es solo para un rato pero 
facilitara el trabajo), y haga la linea de comandos Edicion/Copiar. Despues haga un cfrculo (sin 
contorno) y apliquele la linea de comandos Edicion/Pegar tamano/Pegar tamano. Utilice el cuadro 
Alinear y distribuir para colocar este cfrculo bien centrado y en la parte de atras. 




Desagrupe el grupo que creo antes. Vamos a crear los gradientes tomando muestras de color del 
logo original (algo que ya hemos puesto en practica en mas de una ocasion) Comenzaremos por 
la parte plateada. Seleccionela y vaya al editor de colores. Allf asegurese de que el objeto no tiene 
contorno y apliquele al relleno un gradiente radial. Inkscape creara uno desde el color del objeto 
hasta transparente. 

En la barra de herramientas seleccione Crear y editar gradientes y coloque el centro y los brazos 
en el lugar adecuado (manipule los extremos con CONTROL y SHIFT pulsados para no perder la 
igualdad y con ello la sensacion de esfericidad) 
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En las opciones de la herramienta elija Editar (se puede llegar al mismo cuadro a traves del editor 
de gradientes) Esto hara aparecer un cuadro llamado Editor de gradiente. Fijese en que Inkscape 
le ha puesto un nombre al gradiente: #3602 en este caso 



Nuevo: |[~]|Q en j Cambio: 



#3602 



Editar. 



Editor de gradiente - □ >< 



stQp 3604| | v || 



Anadir parada Borrar parada 



Desvio: 



0.00 



rColor de parada 




El color (no el gradiente, en este caso) tiene un nombre dado por Inkscape y que en el ejemplo es 
stop3604. Muy importante es la flecha que se encuentra justo al lado del nombre puesto que 
despliega todos los colores que forman el gradiente en esa parada. La parte de abajo del cuadro 
muestra las caractensticas de color de la parada que tengamos seleccionada. 

Pase al segundo color y vera que las caractensticas de transparencia cambian de 255 a 0: 
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Editor de gradiente 


- □ [xj 










stop3606 v 


^ | 






Anadir parada 


Borrar parada 




Desvio: 

Color de parada 


1.00 £ 




1 RGB 1 H5L || CMVk| 


Rueda ( 


IMS 








0 


RGBA: 


00808000 





I I 

Suba la transparencia a 255 y cambie de color pinchando en cualquier parte del interior de la 
rueda (es solo una demostracion, a continuacion vamos a aplicar los colores reales) 

Escoja la herramienta de Seleccion de color y seleccione el origen del gradiente; despues tome la 
muestra de color correspondiente en el original; acto seguido seleccione uno de los nodos de los 
brazos del gradiente y tome la muestra correspondiente en el original. El resultado: 
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La parte plateada ya tiene un gradiente que va de bianco a gris pero es conveniente anadir 
paradas. En el cuadro del Editor de gradiente anada una parada con el boton correspondiente (da 
igual cual de los dos colores tenga seleccionado porque Inkscape la creara en el medio. Cuando 
haya mas de dos colores hay que tener seleccionado el color que esta encima de la parada 
que queremos crear) 

Sobre la representation del gradiente aparedce un nuevo nodo (esta es una de las grandes 
novedades de Inkscape 0.46) 

Seleccione el nodo de la parada en el gradiente y tome la muestra de color en el original. 




Vamos a anadir una parada debajo de esta ultima... 
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De momento lo dejamos asi (luego puede volver sobre el si le apetece anadir paradas). Ahora 
seleccione el objeto que hace de bisel y apliquele un gradiente de dos colores tal y como muestra 
la ilustracion siguiente. 




Nos falta la parte azul. Seleccionela y apliquele un gradiente radial tambien. Escoja los dos 
colores iniciales. 
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Vamos a anadir la primera parada y comprobaremos que ocurre algo que antes no nos habia 
pasado: coincide con una parte en la que no podemos coger la muestra apropiada en el original. 
Para eso existe la posibilidad de Desvio. Esta edicion se puede realizar desde el Editor de 
gradiente o desde el nodo del gradiente sobre la figura. La aportacion de Inkscape 0.46 son 
precisamente estos nodos extras (antes solo se mostraban el primero y el ultimo) Parece 
apropiado usar los nodos cuando se esta copiando un gradiente -como en este caso- y la barra 
deslizadora del cuadro Editor de gradiente cuando somos nosotros los que lo estamos creando. 
En el ejemplo que sigue he usado cinco paradas. 




En el ejemplo anterior parece que la sombra ha quedado algo desplazada. Seleccione el objeto y 
con ALT pulsado para no perder la seleccion coloquelo en su lugar (yo la he estrechado un poco 
por la derecha) Despues ajuste la transparencia para que no quede tan oscuro y ademas se tina 
un poco de azul. El resultado: 
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Le propongo duplicar el objeto principal y eliminarle todos los nodos menos los de la corona 
exterior. Esta corona exterior pongala sin relleno y con borde negro muy fino. Con eso consigue 
unos contornos que le dan gran volumen a la corona de fuera. 




^Tiene usted paciencia para seguir mejorando el resultado o la imitacion le parece aceptable? Lo 
dejo en sus manos. 
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Loao 12: Primeros aiustes 



Una de las herramientas mas poderosas de un programa vectorial se encuentra en los 
denominados Ajustes o Snaps que hacen que los objetos o los nodos se comporten como imanes 
atraidos por otro objeto o nodo. Es una de las caracteristicas que mas han mejorado en la version 
0.46 de Inkscape. Esta es mi propuesta: 




Pero antes vamos a detenernos en un logo mas simple para poder comenzar a comprender la 
manera de trabajar de los Ajustes. ^Recuerda este logo?: 




Saque a escena dos triangulos, uno invertido respecto al otro y no se preocupe de la colocacion. 
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Imagine que los dos triangulos pudieran comportarse como dos imanes y atraerse para conseguir 
la figura deseada. Vamos a activar los parametros necesarios en el cuadro que surge de la Ifnea 
de comandos Archivo/Propiedades del documento. En ese cuadro seleccionamos la pestana 
Ajustes. En ese cuadro asegurese de tener activada la herramienta con Activar ajuste. Despues 
en seleccione Ajustar/Esquinas de cajas de contorno (este parametro es el que esta 
determinando el origen del ajuste). En el siguiente apartado, Ajustara objetos, seleccione 
Ajustara esquinas de cajas de contorno (este parametro es el que actua como destino del 
ajuste) La siguiente option dentro de este apartado, Ajustarsolo si esta mas cerca que, y 
despues determinar la fuerza de atraccion con Distancia de ajuste, sirve para hacer que el efecto 
sea menos brusco. Yo le recomiendo dejarlo activado y subir la Distancia de ajuste al maximo. 



Propiffdddes- del do^umenta (Shift-ClrL, ■ 



FYOtfedattes del documents fsNFt+Ctrh-D} 



IS t*J 



Pigna G.iaj j, Rcjfatl AtfLBta- 1 Funics dc fflifei 
AjwLt= 

0 Adtiv-ar .a juste 

A jut ban 

0 Esqunw de cogos de ccntcmo 
fl]iKi-^r a objetos 

|_J AiLEtaf abordesdEcalasdEoorfcooKi 
0 SiLEtar aesoun=£ dr cal^s dr contotno! 
PI AjLEtar £jb i\ esta ma's cerca qua- 
Qstannade bJjsis 



t uild- L-_l_ zila iidt LrrLaguc; 

Dfstand a de ajuste ■ 



Ajmtdr d yuidi- 

□ A\wAar sab si Ktimas cerca que: 



-Jr. 



J- 



95 



PROYECTO BIG-CURSO DE INKSCAPE-EL BLOG DE JOACLINT ISTGUD 



Ahora aproxime un triangulo al otro y comprobara las consecuencias. Despues haga la booleana 
de Union. Reduzca la Distancia de ajuste al minimo y cree los dos duplicados con la rotacion de 
120° para obtener una escena como esta: 




He dejado seleccionado el objeto de arriba para que vea como ahora el tipo de ajuste anterior 
daria problemas puesto que el vertice del rombo no esta en la esquina de la caja de seleccion. 
Vamos entonces a decirle a Inkscape que haga atracciones entre nodos; algo que es mucho mas 
efectivo en un caso como este. 



Pro pladadfiE del doc umsnto fShflft-^ Ctrl... . H fg 


j Propfedades dd dbcumenlo (SWt-Ktt+tO) 


E SI 


1 PSfiinaLGutel Rejlas Aiustar Puntcs de qjuste 


Ajuste 

E ftdhrnar ajustt 








□ iE^nai de ca\ai de cantomo^ 




1 fljui tar a oh]etra 

□ A]MS# a &T4»(fcK 




0 AiustaT -a nodes 




1 Q ftjustar a bordes de cajas de ccrtctco 




1 "^1 Aius:o r a esquhas de caias de contDrno 




0 AjLEJar solo si esta mas cerca que; 




^staring flju^c 




1 Ajustor a rejilos 

^ Ajustar sob si esta mas cere a que: 




1 DlstarfCia de ajuste ' 


1* 


1 A justar a fjuws 

~| Aius:o^ sob si esta mas ccrca que: 

1 CHstanoa de ajuste 
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Observe los cambios hechos en el cuadro anterior; se traducirian por algo asf como: atraer los 
nodos de un objeto hacia los nodos de otro. Aumente la Distancia de ajuste al maximo y aproxime 
los rombos. Sin duda, una herramienta con posibilidades impresionantes. 

Volvamos entonces a nuestra propuesta para esta practica. Se la recuerdo: 



Es un logotipo en perspectiva isometrica y nosotros nos lo vamos aplantear como un autentico 
logo 3D, es decir, que los modulos cubicos que quedan tapados estaran TAPADOS. 
Comencemos por crear el primer cubo. El procedimiento es muy similar al del logo del ejemplo 
anterior. Cree los tres rombos con los correspondientes giros de 120° 





| 




■ 






1 










GIRO 
120° 


I 


GIRO 
120° 






1 











Use el segundo de los metodos que dijimos antes para hacer las atracciones. Despues seleccione 
los tres objetos y apliqueles un trazo negro y con un grosor considerable imitando al original. 
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En la pestana Estilo del trazo debe seleccionar tambien un remate redondeado para las esquinas. 



Re Lie no y borde (Mayus.+Ctrl+F) 



^Relleno y borde (Mayus.+Ctrl+F) 
r Relleno [[^Color de trazo | ^? Estilo de trazo | 



6.335 



Ancho 
Union 
Lirnite de inglete: |^ 
Punta: 
Guiones: 
Marcas de initio: 



n 



n 



Marcadores rmedios: 



Marcadores finales: 



v 0,00 
II 



® 



Ninguno 



Ninguno 



Ninguno 



Blur: 

j- 

Opacidad, % 



0.0 



■{§ 1 100.0 |g 
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Seleccione cada una de las caras independientemente y tome las muestras de color del original. 
Despues agrupe (despues vera que los ajustes siguen funcionando correctamente). Ademas 
puede hacer un duplicado del grupo y hacer el reflejo horizontal. 




Es posible que no tenga activados los Ajustes; si es asi, activelos con los parametros anteriores 
(de nodos a nodos). Comience ha hacer duplicados y vaya colocandolos en su sitio (si se situan 
delante ya sabe lo que tiene que hacer: Objeto/Bajar) 



Recuerde bajar la fuerza de los ajustes o desactivar la option para continuar trabajando con 
comodidad. Este es nuestro resultado final: 
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Dependiendo del tipo de reflejo que queramos anadir a un logotipo podemos plantearnos distintas 
posibilidades. Asi, el reflejo puede ser: 

• un degradado desde un color hacia una transparencia (depende de que el logo sea de un 
solo color) 

• una mascara aplicada al objeto que produce el reflejo (se puede aplicar a objetos 
independientes o agrupados) 



La primera posibilidad no debena suponer un problema para usted en este punto del curso. Asi 
que vamos a ver la segunda de las opciones. 



Observe que el objeto del reflejo no se reduce simplemente a reducir la transparencia puesto que 
pierde intensidad a medida que va bajando. Comencemos por crear el logo (parte superior); 
primero la manzana y la hoja, un buen ejercicio de nodos. 
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Aqui nos encontramos con la disyuntiva de algunos logos anteriores ^Restamos la manzana al 
cuadrado para que tome el color del fondo o la conservamos para que siempre sea blanca? 
Parece mas apropiado conservarla de color bianco para lo cual tenemos un metodo que, siendo el 
mas "logico", no funciona correctamente en este caso en Inkscape (pero tenga en cuenta que en 
otros muchos casos si funciona bien) Veamoslo. 

Hay que eliminar los excedentes de la izquierda y de abajo. Cree un cuadrado con las esquinas 
redondeadas y que se adapte al modelo: 
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Una vez hecho haga un duplicado, cambiele el color (para poder saber siempre cual es el que 
tiene seleccionado) y envfelo atras (no detras del bitmap si esta haciendo la practica con la 
referenda del original). Ahora seleccione la manzana y el cuadrado de arriba y haga la linea de 
comandos Trazo/lnterseccidn para que se genere un objeto con los elementos comunes, es decir, 
la manzana sin los excedentes antes mencionados. Le muestro una imagen aislada del objeto que 
se ha creado: 




Si aplica el color adecuado al cuadrado que le ha sobrado y a la manzana obtendra el logo 
definitivo (sin reflejo) pero con unas lineas inadecuadas. Esto es un error de grafica puesto que si 
comprueba las localizaciones X e Y de los objetos veran que coinciden y ademas no aumentan de 
grosor cuando se hace zoom (este fallo ya nos ocurrio en la practica Logo 2 ) 
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Las soluciones del tipo... 

• anadir borde a la manzana 

• desplazar los lados del objeto cuadrado 



... no me convencen en absoluto puesto que van en contra de la filosofia de un software de 
vectores. Asf que le propongo un metodo alternativo, tan eficaz como debena haber sido este. 

Comenzamos desde el momento en que tenemos la manzana y el cuadrado con las esquinas 
redondeadas. 




NO hacemos la operation de Intersection. Duplicamos el cuadrado y lo desplazamos. Con el 
cuadrado inicial y la manzana hacemos la Diferencia. Despues con las opciones de alinear y 
distribuir coloca los dos objetos correctamente asegurandose que el de la diferencia queda arriba. 
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En este caso no se producen efectos visuales inapropiados. El metodo es correcto; nos permitira 
siempre editar el color de la manzana por un lado y el del cuadrado por otro. A mi lo que no me 
gusta es el hecho de que la manzana NO es un objeto en si mismo. 

En la imagen siguiente he anadido un gradiente de dos colores para imitar el original. 





I / 






r x 



Es el momento de hacer el reflejo. Todos los intentos usando gradientes que evolucionan hacia 
transparente fracasan por culpa del objeto bianco que se encuentra debajo (si hubieramos hecho 
la Diferencia para que la manzana fuera transparente en lugar de blanca no habna ningun 
problema -editar los dos objetos por separado no parece un metodo adecuado-) Pero solo se 
aprende practicando. Intente conseguir el reflejo con gradientes y que despues funcione en todo 
tipo de fondo (no solo el bianco) 

Inkscape cuenta con una opcion para este tipo de situaciones. Se denomina mascara y funciona 
muy parecido a Objeto/Clip. Vamos a analizarla. 





D bjeto/C i pf Aplicar ObjetoyM escsrs/ Aplcer 
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Observe el logo y el objeto con el gradiente que esta situado encima. Al aplicar el clip se origina un 
efecto de recorte tal y como ya se explico en otra practica. La mascara actua exactamente igual 
pero aplicando unos parametros extras muy sencillos de comprender: Blanco=transparencia 0%, 
Negro=transparencia 100% Por el medio todos los grises que se pueda imaginar. En un 
gradiente esto se traduce en un aumento progresivo de la transparencia. Tambien puede usar 
colores pianos o gradientes de varios colores para probar resultados: 




Observe como el azul oscuro origina mayor transparencia que el amarillo, por ejemplo. 

Este procedimiento es, por lo tanto, el que vamos a usar para hacer el reflejo de nuestro logotipo: 
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En este punto puede ajustar la transparencia del reflejo para intentar imitar al original. Ahora si 
tenemos garantfa de que el reflejo funciona sobre cualquier fondo: 
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Loqo 14: Dilatacion v contraction 



Observe el logotipo de esta practica: 




Quantum3D* 

Es obvio que necesitamos el contorno de una figura como objeto para poder editarlo como tal 
(cortarlo, por ejemplo, y asi poder darle distintos colores o gradientes dependiendo de las zonas) 

En Inkscape, mas alia del concepto de escalado, podemos considerar un recurso que vamos a 
denominar Dilatacion/Contraccidn y que podemos aplicar a los objetos con un par de recursos que 
resolveran el asunto de diferentes maneras. 

Pero antes de entrar a realizar este logotipo en concreto vamos a analizar algunas cuestiones 
tecnicas relativas al tema que nos concierne en esta leccion. Supongamos que tenemos un 
triangulo y que necesitamos otro mas pequeno "equidistante" del primero. Parece un asunto 
sencillo pero no es asi. Una vez duplicado y cambiado de color, al aplicar un escalado el asunto 
fracasa. 
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Las herramientas de Alinear y distribuir tampoco nos sirven de mucho para conseguir lo que 
necesitamos. La solucion correcta la encontraremos en la linea de comandos Trazo/Desvio 
dinamico (se supone que esto se lo estamos aplicando al duplicado) 



3^ Objeto a trazo 


Mayus.+Ctrl+C 


^° Borde a trazo 


Ctrl+Alt+C 


Vectorizar mapa de bits. . . 


Mayus.+Alt+B 


r^J) Union 


Ctrl++ 


|\ ' Diferencia 


Ctrl+- 


Interseccion 


Ctrl+* 


[§) Exclusion 


Ctrl+^ 


[g ' Division 


Ctrl+/ 


[K^ Cortar trazo 


Ctrl+Alt+/ 


Combiner 


Ctrl+K 


[(J) Descormbinar 


Meyus.+Ctrl+K 


Reducir 


Ctrl+( 


Amplier 


Ctrl+) 


, Desvio dinamico 


Ctrl+J 


^\ Desvio en|azado 


Ctrl+Alt+J 


Simplificar 


Ctrl+L 


f& Revertir 




Path Effects... 


Mayus.+Ctrl+7 



Se nos muestra algo totalmente nuevo hasta el momento, una especie de nueva modalidad de 
edicion puesto que el triangulo no tiene nodos ni transformadores, sino un unico punto de edicion. 
Usando este punto haga el triangulo mas pequeno. 
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Pero el asunto parece no responder a lo que esperamos si hacemos el triangulo mas grande. 




La razon se encuentra en que Inkscape lo que esta calculando es la perpendicular (normal) en 
cada uno de los puntos y por lo tanto cuando un angulo es mayor de 180° hacia el lado que crece 
se generara un arco para unir los finales de los lados del triangulo dilatado. Puede que en alguna 
ocasion esto sea lo que usted esta buscando pero en otras puede que no se ajuste a sus 
expectativas. Esto puede ocurrir tanto en dilataciones como en contracciones: 
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Observe en la figura anterior como a partir del original azul oscuro, la contraccion presenta una 
vez el efecto de curvatura mientras que la dilatacion la presenta tres veces. 

La diferencia entre Desvio dinamico y Desvio enlazado esta en que el enlazado crea un duplicado 
para hacer la dilatacion/contraccion. Parece razonable usar: 

• Desvio enlazado cuando se va a hacer una dilatacion (porque el duplicado se crea 
automaticamente y detras del original). 

• Duplicado manual mas Desvio dinamico si se va a hacer una contraccion. 



Inkscape ofrece una posibilidad extra para aproximarnos al concepto de dilatacion/contraccion con 
las opciones Reducir y Ampliar del menu Trazo. 

En esta ocasion si se conservan los angulos pero no confie en el resultado si la 
dilatacion/contraccion es muy amplia o si la distribution de los nodos hace que Inkscape empiece 
a no "saber" lo que tiene que hacer. 

NOTA: use los atajos CONTROL+SHIFT+8 y CONTROL+SHIFT+9 para conseguir una edition en 
tiempo real. 
Por ejemplo: 




Observe como Inkscape no ha sabido interpretar uno de los puntos en el logotipo anterior que lo 
ha resuelto como si de un desvio se tratara. 
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Comencemos entonces con nuestro logotipo: 




Un analisis del logotipo le hara comprender por que hemos invertido todo el espacio anterior en 
comprender los conceptos de dilatacion, desvfo... 

Necesitamos uno de los contornos, por ejemplo todo el contorno que esta en contacto con el fondo 
bianco. 




En este punto NO haga la Diferencia todavfa. Necesitamos DOS duplicados del circulo: 

• uno para poder usar su centro como centro de giro (mas adelante comprendera) 

• otro para tener el objeto-esfera bien alineado al final del ejercicio (haga ese objeto ahora. 
Duplique, cambie de color, ajuste el tamano y haga la linea de comandos 
Objeto/Propiedades del objeto...; en el cuadro que aparece seleccione Ocultar. Con esto el 
objeto desaparecera de la escena, mas tarde lo volveremos a hacer visible) 
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Objeto 1 




5? Relleno y borde... 


Mayus.+Ctrl+F 


Filter Effects... 




| W$ Propiedades del objeto 


Mayus.+Ctrl+O 


j5[ Agrupar 


Ctrl+G 


Desagrupar 


Mayus.+Ctrl+G 


Clip 


► 


Mascara 


► 


Patron 


► 


Objects to Marker 




Objects to Guides 




^+ Elevar 


PgUp 


Bajar 


PgDn 


= f Traer al frente 


Home 


I = Bajar al fondo 


End 



Propiedades del objeto (... - □ [XJ 



Id |path3267 



Aplicar 



Etiqueta 
Titulo 



#path3267 



rDescripcion- 



0 Ocultar 



I I Bloquear 



Hechos estos duplicados ya puede restar uno de los dos circulos visibles al triangulo inicial. 
Ahora inserte un rectangulo e inclfnelo 30° desde el cuadro Objeto/Transformar/lnclinar. 
Asegurarse de que uno de los lados inclinados coincide con los del logotipo original. Despues 
desde Edicidn de tiradores situe el otro (NO desde Edition de objeto puesto que se pierde la 
inclinacion del lado que ya tiene ajustado) 




NOTA: En este caso el angulo es facil de descubrir pero si no fuera asi podria realizar la 
inclinacion a mano. Mientras realiza la inclinacion manual en la parte de abajo de la interfaz 
aparece el valor numerico del angulo (observe que debe hacer la inclinacion de una sola vez o de 
lo contrario tendna que ir haciendo operaciones con varios datos) 
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■Capa l v Inclinar: -47,30°; con Ctrl para Pijar el angulo 



Ese objeto debe ser colocado en horizontal. Use para ello el cuadro Objeto/Transformar/Rotary 
gire 60° (90° menos el valor de la inclinacion) Despues use las opciones de Alinear y distribuir para 
asegurarse de que consigue una geometna como la de la siguiente ilustracion (sin que se mueva 
el cfrculo, para ello coloque el rectangulo inclinado cerca de su lugar de destino y despues 
seleccione, en este orden, el rectangulo y despues el cfrculo; para finalizar realice la operacion de 
alineacion correspondiente) Esta operacion garantiza que la geometna del logo quedara precisa. 



En este punto lo que necesitamos es poder girar el elemento rectangular para colocarlo de nuevo 
en su sitio (pero ahora con la garantfa de estar alineado correctamente con el cfrculo) y utilizando 
como centro de giro el centro del cfrculo que aun nos queda. Para ello vamos a usar el siguiente 
recurso. Convertimos el cfrculo en trazo y le damos un corte por el medio y vertical. Para ello 
eliminamos el nodo de la izquierda y unimos los dos nodos centrales con segmento recto (habrfa 
otras posibilidades pero esta es la mas rapida casi seguro) Despues unimos los dos elementos. 



Este nuevo objeto va a ser rotado desde el centro del diametro del cfrculo que se ha cortado. Para 
ello pasamos a los transformadores de rotacion/inclinacion y desplazamos el centro de giro hasta 



A 



A 
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ese punto en concrete Vera que Inkscape le facilita el trabajo puesto que tiene snaps hacia los 
puntos medios de las cajas de seleccion asf como a las esquinas y al centro geometrico (ademas 
le ayuda a mantener el centro en los ejes X e Y) 



Transformer (May lis. ^ Ctrl 



QVlrahsFcfmar (Mayus.+CtrkM) 



Zl Apfcar a cada gbjeto per saparado 




Umpiar 




Quantum3D° QuAntIiivGD 



Puede rotar el objeto a mano pero parece que lo mas conveniente en este caso sea volver a 
utilizar el dato que ya conocemos. Ahora el valor de la rotacion es -60° Hecho esto solo nos queda 
hacer la Diferencia. 




Geometricamente perfecto. 
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Duplique este objeto y cambiele de color. Despues aplique Desvio dinamico y consiga la figura del 
interior. 




Ahora tenemos que duplicar este ultimo objeto y despues hacer la Diferencia para obtener el 
contorno. 




El contorno es un objeto y no un trazo, asi que podemos comenzar a seccionarlo para convertirlo 
en siete objetos distintos a los que poder dar colores independientes. Vamos a trabajar con la 
herramienta de dibujar lineas rectas y curvas de Bezier para hacer los segmentos que originaran 
los cortes. Esta operacion no puede hacerse con precision sin la ayuda de los Ajustes o Snaps. 
Necesitamos snaps desde nodos hacia nodos: 
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Propiedadcs* del documemlo (Shifl-CtrL, , , 




■ Prcpiedades del document (ShlFt-HCtri-i-D) 




Paglna Guas Re^llas A|Uf tai" I Puntos de ajLEte 


A juste 




0 Active ajuste 




Ajustar: 




0 NDdCK 




1 1 Esqurias de znyis de contorno 








1 1 rtjuitar e trazodo* 




[^1 Ajustara nodos 




j Ajustai - a bctoes de ca^a&de coritorno. 




iL"i •iHai *i i"- r -~ 1 1 i —l^ -^j* ■ »i M — h i~ i r~ i"i 

i i rn ^ J j ■. Q i o - - '-'jj-iij 1 if lu i yj 




0 Ajustar sdo si esta mas cerea que : 




Detanela de ajuste 




Ajuvl riw n r*-jill-rt% 




□ Ajustar wlo si csta m» teres que; 




1 Dpfcsncia dc ejuStc 




Aiusbar a qui as 




1 1 LA^ustar solo si esta mas oerca qua : j 




1 Detanela de ajuste ■ 


— a» 





Vamos a trazar con estos parametros un objeto cerrado con un aspecto poco convencional pero 
que dara el resultado adecuado. Trace segun indica la imagen siguiente hasta completar el objeto. 
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Recuerde desactivar los Ajustes. 

Seleccione el objeto-contorno y este ultimo trazo y haga Trazo/Division. Esto originara los siete 
objetos que necesitamos para completar nuestra geometna. Seleccione uno por uno y tome las 
muestras de color del original a excepcion del objeto circular al que tendra que anadirle un 
gradiente radial (yo lo he creado con cuatro paradas) 




Recupere el objeto-esfera que ocultamos al comienzo con la linea de comando Objeto/Mostrar 
todo y apliquele un gradiente con uno de los brazos mas largo que otro (yo lo he hecho con cuatro 
paradas) 




La esfera necesita un objeto mas: un circulo con algo de desenfoque y de transparencia. El motivo 
es que este elemento no esta centrado respecto al gradiente y no es posible conseguirlo mediante 
las paradas. 
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La parte grafica ya esta terminada. Solo queda la tipograffa. En principio parece que la Q inicial 
habra que dibujarla y para el resto usaremos una fuente convencional Arial black (sabe que no es 
nuestra intencion imitar al 100% las tipografias). Respecto a la Q inicial tengo poco que decirle a 
estas alturas del curso: dos circulos, diferencia; un rectangulo, diferencia; un rectangulo inclinado, 
union. 




Usando la fuente antes mencionada y haciendo las alineaciones pertinentes este es nuestro 
resultado final. 
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Loao 15: Obietos clonados 



En esta leccion le propongo un logo que por su sencillez puede llevar a metodos poco apropiados 
de resolution. A mi se me ocurren un par de metodos aunque aquf solo le voy a explicar uno a la 
espera de nuevas lecciones donde se profundice en otras herramientas de Inkscape. Este es: 




Antes de entrar a resolver el diseno, permitame pararme a explicarle un concepto que NO es el 
que se va a desarrollar en este tutorial 

Hay veces que un mismo motivo se repite de una manera sistematica en un diseno. En ese caso 
estanamos ante un patron que se ordenana como si de un modulo rectangular se tratara, como 
una sucesion de baldosas. Se entiende que son todos iguales y que despues no queremos que 
unos se distingan de otros. 




GRUPO AV, LLC. 

Real Estate Development: 

Biz-Logo.com Portfolio G COPYRIGHT. BIZ-LOGO.com. All Rights Reserved. 
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Es el caso del motivo decorativo del fondo de este otro logotipo. En este caso lo que debemos 
disenar es un modulo con los conceptos de diseno que ya conocemos y despues convertirlo en 
patron con la linea de comandos Objeto/Patron/Objetos a patron. 




De esta manera cuando hagamos el rectangulo del fondo podremos rellenarlo con este patron o 
con cualquiera de los que hayamos creado con anterioridad (ademas de los predisenados y que 
vienen integrados en Inkscape) 



Re Lie no y borde (Mayus.+CtrL+F) - □ 



J^Relleno y borde (Mayus.+Ctrl+F) 



Relleno I^Co lor de traz o ||IH?EsUIq de trazo 





Use the Node tool to adjust 
position, scale, and rotation of the 
pattern on canvas. Use Object > 
Pattern > Objects to Pattern to 

create a new pattern Prom selection. 



Blur: 

J 

Opacidad, % 



0.0 



100.0 
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Ahora, cuando estemos en edicion de nodos, al objeto con el patron le quedan asignados tres 
nodos para su edicion: 



x o 
□ 



En principio estos nodos saldran encima del objeto/patron pero eso no continuara asf si mueve el 
objeto relleno. Los nodos del patron se desplazaran con este otro objeto. La funcion de estos tres 
nodos es: 

• aspa: desplaza el patron 

• cfrculo: rota el patron 

• cuadrado: escala el patron 



En estos nodos siguen funcionando las restricciones propias de la tecla CONTROL 

Puede liberar al patron del objeto (y perdera este ultimo) mediante la Ifnea de comandos 
Objeto/Patron/Patron a objetos. 

Pero hay otras maneras de entender el concepto de "motivo que se repite". Se trata de aquellas 
ocasiones en las que el motivo en cuestion cambia de alguna manera a lo largo de su repetition 
(cambiando de tamano, de opacidad, desplazandose en uno de los ejes...) 

En ese caso no lo denominamos patron sino clonacion. 

Comencemos nuestro logo. Tenemos claramente una red modular de 7x7 elementos (aunque 
despues tengamos que eliminar siete de ellos -parece un logo magico-) Comencemos por crear el 
de arriba a la izquierda (cuando creemos los clones estos se crearan de arriba hacia abajo y de 
izquierda a derecha) 
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Toda la edicion para la creacion de los clones se realiza desde el cuadro Editar/Clonar/Crear 
clones en mosaico... y que da lugar a un cuadro con numerosas pestanas: 



I-hIi-ih- h-Uniis^rirk-? 



i C:rtar 



Li 



QikK 



L 



% Am... 






■Jtd+U 




A G :-:r oji+a er- i>apa da 1> :> 


W:t6 I 


f-r' F 11 j j 


Dd 


j-J: 5 efcic trior tod □ 


■■ llr. 




E LU-'>+, c , 










[f>1 ELftlk ill... 





Ires :o3 



1: 1 ■! ..1 -1 11 r- ?■ . 



Alt tO 




0 flkif^aiiTLr-s: 

1 Lhr-:r * : j™flo y pM:y Jc a t»c 4 pre MlsrrwVe pin dads* 



I^-^.t-- I I C rK , 



r-l-; ■ i 3 b«H 4fl ■: criL ir mura. 



En ese cuadro vamos a poner los primeros datos para nuestra clonacion: 7 filas y 7 columnas 
(este dato aparece sea cual sea la pestana que tengamos activa) 



0 Filas J columnas: 



x 7 



O Altura, anchura: 50.00 * 




Hagamos la primera clonacion sin introducir ninguna variante mas (en el caso de haber variado 
algo, asegurese de pulsar Reiniciar antes de crear los clones) 
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El resultado: los clones son todos iguales y en contacto unos con otros. Parece evidente que 
debemos introducir variantes para que los clones evolucionen segun los parametros del original, 
primero de todo vamos a indicarle a Inkscape que desplace los clones un tanto por ciento hacia la 
derecha cada vez que los cree para que cuando salgan no se toquen en las columnas. 

Deshaga la operacion anterior. 

Este es el dato que vamos a introducir de momento Desplazamiento por columnas=11 3% (algo 
mas de la unidad -siendo la unidad el modulo, es decir, el cfrculo-) 



Simetria | Desplazamiento Escala Rotation || Desenfoque y q 



Porfila: 



DesplazarX: 1 0.0 


113. C 






DesplazarY: 1 0.0 


0.0 





Por columns: Aleatorizar: 

1©% 



% 



0.0 



0.0 



Enponente: 



1.00 



1.00 




El desplazamiento por columnas ha quedado ajustado. Ahora nos vamos a ocupar del 
desplazamiento en las filas con Desplazamiento porfilas=117% (recuerde deshacer la operacion 
anterior): 



Simetna [ ~Desplazamiento Escala Rotation Desenfoque y o 



DesplazarX: 0.0 



Por fila: 

% 



Por columns: Aleatoriz-ar 



DesplazarY: 117.C 



Ewponente: 1.00 



113. C 






0.0 






1.00 







0.0 



10% 







• •••< 




• •••< 


ft* 



Ahora es necesario indicarle a Inkscape que aumente los clones segun avanzan de izquierda a 
derecha. Una vez deshecha la operacion anterior vaya a la pestana Escala e introduzaca Escalar 
X en las columnas=18% y Escalar Y en las columnas=18% (es decir, aumentar por igual a lo 
ancho y a lo alto) 
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Simetna 



Desplazarmiento 



Escala 



Rotation 



Desenfoque y op 



Porfila: 



Escalar X: 
Escalar Y: 
EKponente: 
Base: 



0.0 



0.0 






1.00 






0.0 





13.0 



Por colunnna: Aleatorisar: 

ft 

ft 



0.0 



18.0 






1.00 






0.0 





0.0 



■l . A- .m 






••••• 
••••• 




••••• 
••••• 

• •••• 

• •••• 

* 



En la clonacion tenemos un objeto "padre" y 49 clones. El primer clon y el "padre" estan 
superpuestos. Cualquier edition (menos mover y borrar) que haga sobre el "padre" sera heredada 
por los clones. Asegurese de tener seleccionado el "padre" con Editar/Clonar/Seleccionar original 
(es necesario tener seleccionado al menos uno de los clones o el "padre" para realizar esta 
operation) y dele color negro (y en el caso del ejemplo aumentaremos la opacidad al 100%. 
Despues deshagase del "padre" y de los clones necesarios para imitar el logotipo original. 




NOTA: He optado por este logo para esta practica por su sencillez y aparente adaptation al 
metodo que se quiere explicar pero es evidente que que hay un aspecto que se ha pasado por 
alto: las dos/tres ultimas columnas no vanan de escala. Aun asi creo que el logo se adapta 
perfectamente para comprender la esencia de los clones en mosaico. 
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Loqo 16: Mas clones 



Una vez comprendida la filosofia mas elemental de creacion de clones en la practica anterior, 
vamos a afrontar un nuevo concepto con este logo: 




Es cierto que admite una solucion como la planteada en la leccion Logo 15 pero vamos a 
aprovecharlo para hacer un tipo de clonacion con vectorizacion, entendiendo por vectorizacion en 
este caso la creacion de objetos en funcion de una imagen que se encuentre debajo (esta imagen 
puede ser un bitmap u otro objeto de vectores) 

Ya sabe que en una clonacion convencional los clones heredan las propiedades de color, 
tamano... del objeto-padre. Lo que vamos a plantear aqui es anular esta propiedad de los clones 
para poder obtener una secuencia en la que las propiedades de los clones (color, escala...) no 
dependan del objeto-padre y obtener un resultado como el que sigue, por ejemplo, en funcion de 
un gradiente que hubiera debajo. 
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Ahora supongamos que tenemos un gradiente debajo y le damos la orden a Inkscape de que los 
clones tengan el tamano en funcion de lo claro o lo oscuro que sea el color de abajo. 




Esta es una edicion muy parecida a la que podemos conseguir calculando la reduccion de la 
escala pero imagine un gradiente mas complejo; la opcion de la escala ya no valdna. 

Supongo que no le ha pasado desapercibido el parecido de este ultimo ejemplo con el logotipo de 
nuestra practica. Asi que vamos a realizarlo. Comencemos por rotar 180° el logo original y 
despues imitar el cuadrado del fondo (sin muchas pretensiones; este NO va a ser el cuadrado 
definitivo) y el que va a ser el circulo-padre. 

NOTAS IMPORTANTES: 

1. Cuando acceda al cuadro de los clones en mosaico reinicie los valores u obtendra 
resultados imprevisibles debido a que Inkscape ha guardado los parametros de la ultima 
edicion. 

2. No es nuestro caso pero para que los clones tomen el color de lo que haya debajo (foto, 
gradiente...) el objeto-padre deben tener el Relleno sin definir (el Trazo puede tener color, 
no tenerlo, tener gradiente o quedar tambien sin definir) 



HclkiH j IndtiIc |Shiri ♦ Ctrl* _ n . X 



Fl I- 

3— — |n.o ? 

3 | 1DD n .M 



Ahora necesitamos el gradiente en el cuadrado con dos colores (bianco y negro). Si aplica la 
creacion de clones Editar/crear clones en mosaico con 36 filas y 36 columnas obtendra una 
secuencia de clones iguales pero para conseguir el efecto de disminucion de tamano debe 
acceder a la pestana Vectorizar y activar la opcion Vectorizar el dibujo debajo de las teselas y 
ajustar otras opciones: 
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• 1 . Seleccionar del dibujo: Color 

• 3. Aplicarel valor a esta caracteristica de los clones: Tamano (si quisieramos que los clones 
heredaran el color del gradiente del fondo debenamos activar tambien Color en este 
apartado 3, pero no es nuestro caso) 

Esto hara que los clones veran alterado su tamano en funcion de la oscuridad/claridad del color de 
fondo. 



Clear clones en mosaic o 



- n 



|0 Vectorizar el dibujo debajo de las teselas | 
ieleccionar del dibujo: 



5imetria Desplazamiento Escala Rotacion Desenf oque y opacidad || Co[oj Vectorizar j 



I 0 Color I OR O clonetiler|H 
O Opacidad Q G Q clonetiler|S 
OB O clonetiler|L 



2. Ajustar el valor seleccionado: 
Correccion de gamma: 



0.0 




Aleatorizar: 


0.0 



©% 



Invertir: Q 



■3. Aplicar el valor a esta caracteristica de los clones: 
n P resencia I I Color 

I [^1 Tamano | I I Opacidad 



® Filas, columnas: j 36 < 36 

O Altura, anchura: 



50.00 



px 



I I Usar el tamano y posicion de la tesela previamente guardados 

| Elminar Desaaglomerar 



Rreiniciar 



Crear 



El objeto no tiene clones en mosaico. 
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La vectorizacion puede llevar tiempo; se han creado 1296 clones. Mi consejo siempre es 
asegurarse de guardar antes de realizar esta operacion para prevenir ocasionales "crashes" del 
programa. 

Despues de varios tanteos saco como conclusion para la realization del logo que conviene 
desplazar algo uno de los nodos del gradiente y disminuir ligeramente la opacidad de todo el 
objeto (haga usted sus pruebas y saque sus conclusiones) 

Una vez hechos los clones asegurese de tener uno de ellos seleccionado y haga 
Edicion/Clonar/Seleccionar original para tener la garantia del tener seleccionado el objeto-padre y 
poder tomar la muestra de color del original (azul; mas tarde seleccionaremos los blancos para 
cambiarlos de color) y despues elimfnelo. Tome tambien una muestra para el color piano del 
fondo: 




- - - - 

- - - - 





Coja todos los clones (los 1296) y agrupelos momentaneamente para hacer el giro de 180° y para 
poder hacer la alineacion correspondiente con el cuadrado azul cuando lo tengamos definido del 
todo (tamano y esquinas redondeadas) 
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Desagrupe los clones, haga un zoom para trabajar a gusto y seleccione los circulos blancos. Para 
este tipo de seleccion puede utilizar un tipo de seleccion implementado en Inkscape 0.46 que 
podemos denominar "de contacto". Para ello desplace el raton (con la herramienta "seleccion" 
activada, ademas asegurese de no tener ningun objeto seleccionado antes) mientras mantiene 
pulsada la tecla ALT. Se describira una linea de color rojo; todos los objetos que sean tocados por 
esa linea quedaran seleccionados. 

Cuando los cambie el color agrupe todo el logo. 
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Logo 17: Controlando la perspectiva 



Uno de los puntos mas debiles de Inkscape (hasta la version 0.46) ha sido siempre poder hacer 
una perspectiva conica controlada. Es cierto que un buen dibujante puede sacarle partido a las 
herramientas (ajustes, guias...) para poder conseguirla pero se echaban de menos herramientas 
que facilitaran el trabajo. 

Hasta la version 0.46 con lo unico que contaba el programa era con un Efecto disenado para ese 
fin y que analizaremos mas adelante. Pero la version 0.46 incorpora una herramienta denominada 
3dbox (Caja3D) que, junto a las guias inclinadas, multiplica considerablemente las posibilidades. 

Este es nuestro logo: 




Efectivamente el logo parece que se podna afrontar desde edicion de nodos con relativa facilidad 
(a excepcion del texto topia) pero recuerde que queremos una perspectiva controlada. 
La herramienta Caja3D requiere algo de practica para comenzar a controlarla. 

Antes de entrar a realizar nuestro logo permftame mostrarle solo algunas de las posibilidades de 
esta herramienta (observe las caractensticas numericas y de activacion/desactivacion de los 
angulos X, Y, Z): 
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• Perspectiva caballera: una de las caras es frontal (X,Y) y las lineas que entran en 
profundidad (Z) son paralelas. 




• Perspectiva paralela o conica de un punto de fuga: una de las caras es frontal (X,Y) y 
las lineas que entran en profundidad (Z) fugan a un punto concreto. 
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Perspectiva conica oblicua o de dos puntos de fuga: solo las lineas verticales (Y) 
permanecen paralelas 




Perspectiva conica de tres puntos de fuga o de piano inclinado: en esta perspectiva 
hay ejes que mantengan el paralelismo 
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Por supuesto todas ellas admiten variaciones en los ejes pero fundamentalmente son estas las 
perspectivas que va a poder conseguir con esta herramienta. 

Aunque la introduction sea un poco larga, permitame tambien comentarle brevemente el tema de 
las gufas inclinadas (otra novedad de la version 0.46) Observe este dibujo: 
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En efecto, son guias oblicuas. Una vez inclinado el rectangulo (y duplicado para que entienda 
mejor el proceso) he hecho la linea de comandos Objeto/Objects to Guides. El objeto desaparece 
y aparecen las guias correspondientes a sus lados. Para crear o editar una sola guia puede sacar 
a escena una de las guias normales y hacer doble die sobre ella; esto hara aparecer un cuadro en 
el que puede introducir el valor numerico en grados para la inclination de la guia (o sumarselo al 
que ya tiene si activa Cambio relativo). Por ejemplo: 



Linea guia 



ID de linea guia: guide2453 
Actual: horizontal en 5236.63 px 



i 



V: 

Unidad: 

Angulo (grados): 
l~~l Cambio relativo 



-3043.395 



5236.631 



px 



45 









1 * 1 


Delete 




Cancel 













Para imitar un logo ya disenado yo optana por calcular graficamente con unas lineas rectas la 
localizacion de los dos puntos de fuga, asf cuando saquemos a escena la Caja3D nos resultara 
facil imitar el original. 




En la ilustracion aparece una guia (a modo de linea de horizonte) que me ha ayudado a precisar 
aun mas la localizacion de los dos puntos de fuga. 

La Caja3D que saca Inkscape por defecto es una perspectiva oblicua de dos puntos de fuga, 
precisamente la que necesitamos para nuestro logo. Ajuste primero los puntos de fuga usando las 
referencias y despues ajuste las esquinas; mantenga CONTROL pulsado para mover solo una 
cara (practique un par de veces, es una herramienta que requiere algo de destreza) 
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Parece que ya tenemos la caja creada y de hecho asi es (incluso podnamos disponer de las caras 
ocultas) pero a mi personalmente no me convence la idea de mantenerla entera. Desde mi punto 
de vista el verdadero potencial de esta herramienta esta en poder trazar ahora todas las guias 
para poder crear las caras o porciones de caras que necesitemos. Las gufas oblicuas en 
conjuncion con los Ajustes permitiran un amplio margen de maniobrabilidad. 

Parece que las posibilidades de las guian inclinadas no dan para mas, aparte de lo descrito antes, 
pero no es cierto. Observe este cuadro al que se accede haciendo doble die en la herramienta o 
con Archivo/propiedades de Inkscape/Formas/ Caja 3D 



P nefe renc ias de Irfcscape [filiift CtrhP] 



, .Praferentias de :rJi£cape('3ift+Qfkf) 

Aattfn 

Dssjilazamentc 

PfflDC 

Id Hcrrzmieriirf 

r-Jodo 

Zaun 

Caja 3D 

Estr-ls 

EspJ-al 
Lift 
F1ur*a 
Caiqrflfi-a 

tube de prftura 

"etto 

Qadtente 

■ 



uajj 3D 



Crear ohjetiK nuf^M cone 

0 Okhu esfctoUBisado 



RElenn; 
TrsD; 



I omar de la sdecejen 



h- Conversler a cues Lniza torses ei uez de ca|£s de contemn 
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Puede comprobar que por defecto esta herramienta tiene activada la opcion de convertir en gu 
todas las Ifneas propias de la caja. ^En que se traduce esto?. 
Comience por eliminar esas lineas auxiliares que le han servido para crear la caja. 
Asegurese de tener seleccionada la caja y haga la Ifnea de comandos Objeto/Objetos a guias 
(recuerde que la caja desaparecera) Esta es la consecuencia: 




Active los Ajustes para que se produzcan snaps en las gufas: 



r- 

Piopiedadei del dtocimentD jShifEtClrE. .. 




I . Frop€da<teE:dEldocuiiert»(5Hft+arl+D) 




1 Pegra jji-st P.e|Jlas Ajid-,v -utiiqs- dc ajLs^s 




AJuste 

3 Attrrar sjjste 






Afrstor: 

3 [dpd[* 






O E^riasdecafJasdecDrtomD 






ftiu*Ldr d uLjetu* 

□ Ajustara trasadts 






3 Ap±ar a nodoa 






□ Ajustar a twdes oe ca|as de contouw 






_J Aj rtrr a f";r| irvw rk raw nrtr*m 






yl AlJitar sdo si etta mac c,erca que; 






Dtstoncia de ajuste 


rn 




fllustar a rcllllas 

^ -AjJEtar idD edra mas cpca que: ! 






1 Dtstsncla de ajuste 


flw 




1 hjuk-Ldr d quid* 

lZI ftjustar sdo si esta mas ceoca que: 






DLL =1 tad UU cPJjl.t 


^0 
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Es el momento de comenzar a dibujar nuestra caja con la herramienta de lineas rectas y de bezier 
(es cierto, como le dije antes que podia haber aprovechado tres de las caras de la caja que ya 
tenia, pero yo en esta herramienta veo mas un recurso que un fin en si mismo; cuando hagamos 
el brillo de la cara frontal entendera mejor por que me gusta disponer de todo este enjambre de 
guias, ademas, recuerde que el logo no es mas que una excusa para aprender a manejar la 
herramienta) Haga los cuadrilateros necesarios para las dos caras visibles y uno mas para la base 
que mandaremos al fondo y que despues escalaremos, desenfocaremos y le editaremos algun 
nodo para imitar la sombra del original. 




Tras aplicar los gradientes de dos colores a cada una de las caras visibles y ocultar las guias (Ver/ 
Guias) esta puede ser una primera impresion (en el ejemplo se ha anadido un segundo 
cuadrilatero de la base y se ha editado con menos desenfoque para tratar de imitar al original): 
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Para la realization del brillo considero indispensable el uso de los Ajustes y de las gufas para 
garantizar la precision en la perspectiva. Recuerde activar y desactivar los Ajustes segun sea 
necesario para cada punto: 




Obtenemos asi un cuadrilatero para el brillo que cumple con todos los requisitos de la conica que 
hemos creado. Esto sin duda le dara solidez al diseno y contribuira a su buena estetica. Una vez 
aplicado el gradiente de dos colores en el que uno es transparente tendremos este resultado (a 
este brillo le he aplicado un ligero desenfoque): 
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Conseguir una imitacion aceptable de la parte de texto en perspectiva no es facil pero nos vamos 
a conformar con una aproximacion. En la parte de la Q yo optaria por hacerla directamente segun 
los metodos convencionales (en la parte final: una division entre la Q y el piano de la cara frontal) 




El texto en perspectiva lo vamos a conseguir con un Efecto que esta disenado para poder hacer 
conicas en objetos (al menos hasta que Inkscape ofrezca esta posibilidad como una herramienta 
mas) 

Comience por crear un cuadrilatero que se adapte al contorno de las letras (use el metodo del 
brillo para asegurarse de que obedece a la conica de nuestro ejercicio) Despues sobre el y usando 
ajustes haga otro cuadrilatero en el orden que se indica en el dibujo siguiente (en Inkscape 0.45 el 
orden corresponded con 2,3,4,1) y despues desplacelo (no elimine el cuadrilatero que le sirvio de 
pauta, lo necesitara para encajar luego el texto asegurandose la precision -recuerde que esta 
leccion se titula "Controlando la perspectiva"-). 

Escriba topia con tipografia Impact y convierta el texto en trazo. Ya tiene todo lo necesario para 
aplicar el efecto: 
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Seleccione, por este orden, el texto-trazo y despues el cuadrilatero (curiosamente en Inkscape 
0.45 era al contrario). Aplique Efecto/Modificartrayecto/Perspectiva y espere a que se ejecute el 
script. 

NOTA: esta operacion salia perfectamente en Inkscape 0.45 pero en la 0.46 presenta algunos 
fallos de vez en cuando. Personalmente he detectado errores cuando el trazo procede de un texto. 
En el resto de los casos suele funcionar sin problema. 
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Agrupe los dos elementos y use los Ajustes para encajar el conjunto en el cuadrilatero que le sirvio 
de pauta. Despues elimine los dos cuadrilateros y cambie el texto de color. Este es nuestro 
resultado final: 
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Loqo 18: Textos en travectorias 



Despues de una leccion tan densa como la anterior vamos a relajarnos con algo sencillo: hacer 
que un texto siga una trayectoria curva, poligonal, mixta... Esta es mi propuesta, que ademas la 
podemos usar para repasar edicion de nodos, gradientes... 




Invierta el tiempo necesario para realizar la parte grafica (al menos una aproximacion; todo en 
funcion de sus posibilidades y aspiraciones) Yo le dejo una captura en "explosion" de como he 
realizado mi copia. 
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Una vez que conseguimos la vectorizacion de la parte grafica pasamos a la realization del texto 
en trayectoria curva que es el verdadero asunto que vamos a tratar en esta lection. 
Comience por duplicar el cfrculo grande. Haga una correcta organization de capas para poder 
trabajar lo mas a gusto posible con ese cfrculo sin que le moleste lo que ya tiene creado. Para que 
la explication sea lo mas clara posible yo he hecho que todo el logo que ya ha sido creado se 
encuentre en una capa invisible y el bitmap casi transparente. En la capa visible (en la que se 
encuentra el cfrculo duplicado use la herramienta de texto para escribir TELETIPSHOP (Yo 
he escogido la tipograffa Arial Narrow/Bold, pero ya sabe que nuestra intention no es imitar al 
100% la tipograffas sino comprender la herramienta) 




Puede invertir algo de tiempo en ver las posibilidades de trabajar con una forma cerrada. A mi 
personalmente no me convence debido a que a veces el nodo que Inkscape interpreta como el 
ultimo (y por lo tanto desaparecera el texto a partir de ahf) no se ajusta a nuestros propositos. Por 
ejemplo en nuestro caso Inkscape va a interpretar como ultimo nodo el de la derecha originando 
serios problemas a la ultima letra P que, muy posiblemente desaparezca cuando queramos 
situarla en ese punto. 

Para poner solution a este asunto con garantfas lo mejor es disponer siempre de una trayectoria 
con principio y final. Este es un tema en el que tiene buena utilidad Trayecto/Cortar trazo (otras 
booleanas no dan mas que problemas) Hacemos una Ifnea que corte al cfrculo cerca de los 
puntos de initio y de final del texto y realizamos Trayecto/Cortar trazo (en la ilustracion he 
cambiado de color el trazo y ya he eliminado la parte sobrante): 
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Ahora cuando tengamos seleccionados el texto y la trayectoria podremos realizar la linea de 
comandos Texto/Poner en trayecto y el texto se desplazara. 



1 EFtceSsjs Fteatra Honra Avuda 


X lesfcoytiw-rfia... 5Nft-KtrH-T 




Pcncr an travecto 


W | HB.OSljSj gi H I t 6,61 1 !?j p:c v| flFecta-i " 






. . , . r r r 


1 ^ I 








i 






1 



EDICION DEL TEXTO EN EL TRAYECTO 



• Fuente, tamaho, alineacion...: desde el editor de textos. 

• Alejar/Acercar al trayecto (efecto de dilatacion/contraccion): ALT + FLECHA-ARRIBA y ALT 
+ FLECHA-ABAJO (esta y las siguientes ediciones hay que hacerla asegurandose de estar 
en modo de texto y con el texto en cuestion seleccionado. Por algun motivo 6bug? en la 
version 0.46 a veces no aparece el cursor que indica en que caracter del texto nos 
encontramos, asf que haga die en el punto en el que le gustana situarlo (en nuestro caso al 
principio, antes de la T inicial) Si esta edicion la hace ademas con CONTROL pulsado los 
saltos son mas amplios. 
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. Mover adelante y atras el texto: ALT + FLECHA-DERECHA y ALT + FLECHA-IZQUIERDA. 
Si nos situamos entre dos letras esto se traducira en un ensanchamiento/estrechamiento 
del espacio entre los caracteres. De nuevo la tecla CONTROL junto a las anteriores 
significara saltos mayores. Use este recurso para imitar el espacio entre los caracteres del 
original. Una vez hechos los ajustes tendremos algo similar a esto: 




No elimine el arco puesto que el texto dependera de el mientras sea texto. Antes debe convertir el 
texto en trazo. Una vez hecho si puede eliminar el arco. Despues habna varias maneras de 
conseguir los dos colores del texto. Quiza la mas sencilla y elemental sea duplicarlo y en uno 
eliminar TELETIP y en el otro SHOP. Luego puede definir sin mayor problema un color para cada 
una de las partes del texto. Esta es mi solucion: 
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Algunos asuntos que no hemos podido tratar al hilo de este logotipo y que merece la pena 
mencionar son: 

• Se puede editar la trayectoria (nodos) despues de aplicarle el texto. Esto permite ver como 
se adapta la tipografia a los cambios en tiempo real. 

• No es conveniente poner espacios en bianco al comienzo del texto para desplazarlo. 
Parece comodo pero tenga en cuenta que esto sera interpretado por Inkscape como mas 
texto y puede traducirse en problemas de dificil solucion en ediciones posteriores 

• Es posible que a estas alturas se pregunte como hacer que el texto se adapte a la parte 
interior del arco de la circunferencia. No sabna explicarle cual es la logica del asunto en 
cuestion pero si en lugar de Cortartrazo usa una Diferencia el texto se situa en el interior. 




Las posibilidades para adaptar un texto a un trayecto no terminan ahi. Observe este logo. 
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No basta con el recurso anterior puesto que la adaptation a la trayectoria implica una deformation 
relacionada con misma. No vamos a realizar aquf el logo pero analizaremos brevemente como 
podriamos afrontarlo. Una vez escrito el texto y convertido en trazo apliquele la linea de comandos 
Trayecto/Efectos de trayecto... (no se preocupe por no tener definida la trayectoria, con este 
recurso Inkscape se encarga de eso) Esto hace aparecer un cuadro en el que debe seleccionar la 
option Aplicar efecto nuevo/Torcer trayecto. Pulse el boton Aplicary en las nuevas opciones 
seleccione el icono de edition de nodos. Esto hara aparecer un segmento con los nodos initial y 
final sobre el objeto. 



S-s ObietD a travcctD 


Stift+Qrl+C 


tf" Barde a fcrayacto 
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[y Cortar trayecto 
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Reiucir 
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Sijjt. Desvi'o dnanuco 
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Olt+L 
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Efactcs de trayecto (Shift- 



EFectot de trayeao (ShmOik-73 
Aplicar cJadbo rcu evo 
Tomer trayecto 



- □ x 



Apicar 



Efecto actual 



Torcer trayecto 



Torcar trayecto 



□ 



ftncho i.oro 
O Ardhura cn LFidades de longitud 
□ 0 trayecto es verttal 



Efimirur 



Seleccione los nodos y convierta el segmento en curva para disponer de tiradores. Edite (haga 
dobre die sobre la trayectoria para anadir nodos) 
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Si selecciona el objeto en edicion de nodos normal (es decir, con el icono de la barra de 
herramientas) dispondra de una modalidad de vision novedosa que le permitira editar puntos 
desde la posicion de origen. 




En esta modalidad puede tratar los nodos como siempre (convertirlos en curva, esquina...) Para 
regresar a la edicion de la trayectoria pulse el icono de edicion de nodos del cuadro Efectos de 
trayecto. Sin duda esta es una herramienta que multiplica las posibilidades del tema Textos en 
trayectorias hasta un nuevo infinite Experimente con ella hasta que sea usted el que domine el 
efecto y no al contrario. 
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Por primera vez en el curso no nos vamos a plantear una copia del logotipo de referenda por los 
medios que podnamos considerar "normales". Este es: 



Pero nos servira para profundizar en algunas herramientas. El avion podnamos plantearnoslo (si 
fueramos los disenadores) con una herramienta como la Caligrafica y despues editar (arreglar) 
algunos nodos (o muchos, dependiendo del pulso o del resultado) Esta claro que el resultado con 
esta herramienta es muy poco previsible; posiblemente su encanto creativo se encuentre 
precisamente en ese caracter manual, anarquico, que le da cierta frescura al trazo. Sin embargo 
es una de las herramientas con mas opciones en Inkscape. 



j fin**: | if. j *; A I j| Estrachar: j-Q.33 g AngJo: -23 | jj ^ R|«s6o: jl.flfl ^ | Rrtw: |o.QQ | ? | Tm*lor: Q.QD 53 OkImz |q.QQ I * 3 Ha»: |ojD£ ^ 



Quiza el mejor consejo que puedo darle es que experimente y se divierta durante un rato. 
Despues tenga en cuenta varios detalles: 

• El Ancho puede ser editado en tiempo real mientras dibuja con las teclas FLECHA- 
IZQUIERDA y FLECHA-DERECHA pudiendo obtener un trazo como este: 
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• El Angulo tambien puede ser editado en tiempo real mientras dibuja con FLECHA-ARRIBA 
y FLECHA-ABAJO. Observe los angulos de inicio y del final del siguiente trazo: 




• Si se producen intersecciones, usted puede elegir el comportamiento con los siguientes 
iconos que aparecen en el editor de colores. 




Con la version Inkscape 0.46 aparecen nuevas posibilidades como crear efecto de grabado o la 
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posibilidad de apoyarse en una trayectoria para controlar mejor el trazo, pero esta leccion no 
pretende llegar a un analisis tan profundo de la herramienta. 

Vamos a hacer algo de "trampa" para imitar nuestro logo. ^Imagina poder ordenarle a Inkscape 
que convierta los trazos del bitmap en trazos vectoriales? Pues es posible; pero no se engane 
demasiado con esta opcion. Es, como la herramienta de Caligraffa, un recurso mas dibuj istico que 
tecnico, por lo que sus posibilidades suelen presentar limitaciones. Vamos alia. 

El proceso de vectorizacion es sencillo. Seleccione el bitmap y haga la linea de comandos 
TrayectoA/ectorizar mapa de bits... En ese cuadro seleccione una vectorizacion de Pasadas 
multiples/Colores/3 pasadas. En las opciones de abajo desactive Suave tal y como muestra el 
siguiente cuadro. 



Trayecto 



'3-3 Objeto a trayecto 


Shift+Ctrl+C 


Borde a trayecto 


Ctrl+Alt+C 


Vectorizar rinapa de bits 


. . Shif t+Alt+B 



[O Union 

Diferer 
: tl Interse 
[§) Exclusii 
Diyjsior 
Cortar 




[§) Combir 
Descon 



Reducii 
Ampliai 
Desvio 
Desvio 



Simplifi 
Revert 

Efecto; 



Vectorizar mapa de bits (Shift+Alt+B) 



^Vectorizar mapa de bits (Shif t+Alt+B) 



0 (Hi 



Modo Opciones 



■Pasada simple: crea un trayecto — 
O Corte de luminosidad Umbral: 

O Detection de bordes Umbral: 

O Reduction de colores Colores: 

l~~l Invertir imagen 



0.450 






0.650 






8 





■Pasadas multiples: crea un grupo de trayectos 
O Pasos de luminosidad Pasadas: 



© Colores 

0 Arises 

1 I Suave 0 Apilar pasadas 0 jEliminar color de fondo 



Creditos 

Gracias a Peter Selinger, http://potrace.sourceforge.net 



I I Selection de primer piano SIOX 
Vista preliminar 




Actualizar 



Stop 



OK 
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Cuando presione OKse creara un grupo de objetos encima del bitmap. A nosotros solo nos 
interesa el avion ya que por el metodo de la vectorizacion las circunferencias de los otros dos 
objetos son de dudosa fiabilidad. 

Realmente las posibilidades del vectorizador integrado en Inkscape y que se denomina Potrace 
son muy amplias. En nuestro caso hemos eliminado la opcion Suave para que no se aplique 
desenfoque a la imagen antes de vectorizarla (Apilar pasadas y Eliminar color de fondo se 
explican por si solas; aun asi compruebe las diferencias). 

Una vez vectorizado el avion es el momento de hacer los dos circulos y despues decidir si el 
bianco sera siempre bianco o transparente. La primera secuencia muestra como ha sido editado el 
cfrculo pequeno para conseguir igualar el color con el interior del avion; la segunda secuencia 
muestra los del objeto que servira para hacer la diferencia con el objeto naranja (que a su vez es 
la diferencia de los dos circulos) y asi presentar el logo como transparente en la zona "blanca" 
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Si quisieramos una imitation aun mejor debenamos editar algunos nodos del avion. Este es un 
posible resultado: 




Tambien puede editar los trazos caligraficos aplicandole una simplification de nodos. El trazo 
puede ganar con ello expresividad (recuerde que usted es el disenador) originando cierres mas 
curvos. Use esta option en tiempo real con CONTROL+L (es mas recomendable que ir paso a 
paso desde Trayecto/Simplificar. 
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No es muy habitual pero puede ser interesante disponer del recurso inverso a la vectorizacion 
Imagine que esta trabajando con un objeto, por ejemplo una tipograffa muy pesada por tener 
muchos nodos como puede ser la siguiente donde una simple palabra tiene 12.603 nodos; el 
recurso Trayecto/Simplificamo parece muy apropiado. 




Una carga de nodos tan grande puede ralentizar nuestro trabajo (sobre todo si ha escrito un texto 
muy amplio) En ese caso una opcion es, cuando le hayamos dado el visto bueno al objeto, 
convertirlo en un bitmap (rasterizar) con Edicion/Crear copia en mapa de bits 



Edition 1 


Deshacer: Objeto a trayecto 


Ctrl+Z 


Rehacer 


Shift+Ctrl+Z 


Historia de deshacer, . . 


ShiFt+Ctrl+H 


ss Cortar 


Ctrl+X 


Copiar 


Ctrl+C 


Hi Eegar 


Ctrl+V 


[j+] Pegar en el sitio 


Ctrl+Alt+V 


If 1 ] Pegar estilo 


Shift+Ctrl+V 


Pegar efecto de trazado 


Ctrl+7 


Pegar tamano 


>■ 


Buscar... 


Ctrl+F 


^2 Duplicar 


Ctrl+D 


Clonar 




* Crear copia en mapa de bits 


Alt+B 


Q Eliminar 


Del 


jrC?j Seleccionar todo 


Ctrl+A 


j Ij Seleccionar todo de todas las capas 


Ctrl+Alt+A 


I Qj Invertir seleccion 
jSl Deseleccionar 


! 


^ Editor XML. , . 


Shift+Ctrl+X 







Esto aligerara considerablemente el peso del objeto pero no dispondremos de opciones para 
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editarlo (aparte del tamano, rotation, clips...) 

Si hace un par de pruebas comprobara que el tamano del objeto condiciona considerablemente la 
calidad del PNG que se crea. Haga copias en bitmap grandes, tiempo tendra de escalarlas. 




Una ultima consideration respecto a estos PNGs que aparecen en nuestro trabajo es que NO 
quedan directamente empotrados en el archivo SVG. Inkscape almacena el PNG junto al SVG y 
guardara la ruta en la que se encuentra. Si cambia de nombre el PNG o lo mueve, Inkscape no 
podra encontrarlo y le mandara una imagen de enlace roto. Yo en el ejemplo que sigue he 
alterado la ruta hacia el PNG pequeno 




Tal y como se comento en Logo 9 puede incrustar las imagenes con Efectos/lmagenes/lncrustar 
todas las imagenes. 
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Logo 20: Calculo de objetos intermedios 



Tras este desconcertante tftulo lo que se esconde es un metodo para crear objetos situados entre 
otros dos. Es muy habitual en diseno de todo tipo que el ordenador calcule las posiciones, 
cambios de color, cambios de forma... que se generan entre dos "claves". Por ejemplo en 
animacion estas "claves" se denominan keyframes. Es posible, por ejemplo decirle al software que 
en el keyframe 1 una esfera es blanca y que en el keyframe 100 es negra. Con la orden adecuada 
el programa calculara los 98 fotogramas intermedios con los grises necesarios para que el objeto 
pase de un color a otro de una manera armonica. 

A este recurso se le denomina interpolacion y en Inkscape servira para calcular un numero 
determinado de objetos situados entre otros dos. Esto incluira, por ejemplo el calculo de las 
distorsiones a partir de las cuales un objeto se convierte en el otro. Algunos aspectos a tener en 
cuenta respecto a la interpolacion en Inkscape: 

• Los dos objetos deben haber sido convertidos en trazos, de lo contrario la interpolacion no 
tendra efecto. 

• Con objetos cerrados no hay una manera de poder saber donde considerara Inkscape que 
se encuentran los puntos iniciales y finales de cada objeto para conectarlos. Sera necesaria 
una primera prueba para poder determinarlo (Bueno, esto no es del todo cierto; puede 
duplicar el objeto y despues hacer la Ifnea de comandos Efectos/Mostrar trayecto/Numerar 
nodos para obtener esta information, pero es mucho mas rapido un tanteo desde la 
operation de interpolacion) Como se puede comprobar en la siguiente ilustracion la 
diferencia en el emparejamiento de los nodos da lugar a resultados muy distintos: 
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Yo diria que la mejor manera de controlar la interpolation es hacer que el segundo objeto sea 
consecuencia de duplicar el primero y despues distorsionarlo. 

Una vez comprendido todo esto veamos la linea de comandos que genera la interpolation. Una 
vez convertidos en trazos los dos objetos y con ellos seleccionados haga la linea de comandos 
Efectos/Generar desde trazo/lnterpolar. En el caso siguiente he escogido los siguientes 
parametros de los cuales el mas sorprendente es Interpolar estilo (Experimental) que permite 
hacer interpolation de los colores y otros efectos (la transparencia funciona bien pero el 
desenfoque no da muy buenos resultados. Experimente) 



Interpolar 




Exponente 

Pasos de interpolation 
Metodo de interpolation 
Duplicar trayectos finales 
Interpolar estilo (Experimental) 0 



Vista prelirninar 



0.0 




5 




1 


■v 



Close 




Despues de esta introduction le presento el logotipo de nuestra practica: 
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Vamos a comenzar por crear el objeto pequeno de arriba para despues duplicarlo y crear parte del 
objeto grande. De momento no nos preocupamos por el corte oblicuo de arriba. 
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Es necesario prolongar la base del objeto duplicado hasta un punto muy concrete Usaremos para 
ello una linea recta que marque la inclinacion generada por los Ifmites de todas las bases: 




Ahora debemos hacer el corte inclinado. Podemos unir los objetos, hacer una diferencia con otro 
objeto y despues descombinar. Hay otras posibilidades; use la que use asegurese de que las 
inclinaciones mantienen la linealidad. Recuerde que la precision geometrica es una de nuestras 
principales metas. 

Tenga en cuenta que la inclinacion es simetrica a la de la linea que uso de referenda. Use un 
duplicado reflejado para crear el objeto para la diferencia. 

El resultado serfa este: 

tlBL „ t [L 

TP»' Til" 
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Estos dos objetos seran las claves para la interpolacion. Crearemos tres objetos mas sin que se 
dupliquen los originales. 



£ Intel polar X 



Exponente 

Pasos de interpolacion 
Metodo de interpolacion 



0.0 




3 




1 





Duplicar trayectos finales 
Interpolar estilo (Experimental) Q 




Si observa atentamente vera que hay un par de curvaturas donde no se ajusta correctamente al 
modelo. En mi opinion se debe a que el diseno original no fue creado con el recurso de la 
interpolacion. En cualquier caso eso es irrelevante para nuestra practica, ya que lo que queremos 
es aprender la potencialidad de esta herramienta; el logo del modelo es solo una excusa. 

Los objetos que han surgido de la interpolacion aparecen en escena agrupados; desagrupelos 
para despues poder hacer con los cinco la operacion de Union. Una vez hecho eso puede duplicar 
y hacer las simetnas necesarias para obtener la parte de abajo del logotipo. Despues use los 
siguientes parametros del cuadro de Ajustes. 



El hecho de tener seleccionado Ajusta a trazados nos permitira aproximar el segundo objeto con la 
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Pmijiedmles Je[ docurnerta (Sliifl-ClrL-D) - □ X, 
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AjLMte 

Ajustar: 

p7 Eicuiizi do cao5 ± co-fynD 

Aiusfcar a objetos 

0 fijLEtar a trazadoe 

n fljustar a ngdos 

□ Ajtst* 4 terdes dt csj« de tantotro 

1 I Ajjstar a esquinas de caas Je : j-t >-nn 
0 rtjustnr sob si esta mas tcrcoquc: 
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Ajustar a rejilta? 

0 Ajustar so Id si esta mas carca 

Dtftandftdefluste 



Ajustar a quias 

0 Ayj&& solo, si esta mas cerca que: 

Distancia dc ajustc 



posibilidad de que se "pegue" a todos y cada uno de los contornos del otro objeto. Ya sabe como 
debe colocarlo... 




Respecto a su colocacion en vertical use una guia como referenda y desplace con CONTROL 
pulsado (a estas alturas una aclaracion como esta sobra, pero nunca esta de mas, sobre todo 
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teniendo en cuenta que tambien es necesario para desplazar los nodos del siguiente paso) 




Desplace los nodos horizontalmente, tanto de un objeto como del otro para evitar esos elementos 
sobrantes; luego solo queda hacer la Union entre ambos objetos. 



Con los ajustes de color adecuados este es nuestro resultado: 
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■HtL ,iliL 



Ah! Se me olvidaba comentarle algo interesante. Observe este otro logo y trate de ver la relacion 
que guarda con nuestro tema de esta leccion: 




DET INTERAKTIVE HOSPITAL 




No voy a realizar el logo completo pero le dare una pista. Aparentemente son tres objetos y algun 
otro para generar la sensacion del brillo. pero ^como se consigue ese gradiente aparentemente 
radial pero que no lo es? Si los objetos fueran circulos no habna mucho problema pero no lo son. 
Mire: 
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Se trata de una interpolation como las que hemos hecho antes (heredando el estilo) en la que el 
numero de pasos han sido 60. Si va a a realizar la experiencia recuerde que al estar un objeto 
encima de otro es necesario que seleccione primero el grande y despues el pequeno, de lo 
contrario los objetos se taparan unos a otros y aunque se realice la interpolation no se podra 
apreciar el degradado. 

Usando esta teona por segunda vez podemos obtener una aproximacion al original mas o menos 
como esta: 




No he profundizado mucho en este logo pero le calculo que para una correcta imitation hacen 
falta no menos de ocho objetos iniciales (sin contar los interpolados, claro). Ahora el reto lo tiene 
usted. 



NOTA: Este sena el momento de realizar la prueba relativa al Anexo: Examen 2 del final. 
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nexo: Examen 1 



El logotipo que se pide en esta prueba es el siguiente: 




Los requisitos obligatorios: 



No se puede hacer edicion de nodos 

El logotipo final constara de dos objetos, que se presentaran agrupados, uno para las 
porciones negras y otro para el fondo interior que habra de ser bianco independientemente 
del fondo en el que lo presentemos 

Debe garantizarse la precision relativa a simetna, continuidad de lineas... 



En realidad la parte mas complicada del ejercicio es la que NO se hace con Inkscape: comprender 
la geometna que forma realmente el logotipo. Le recomiendo que comience por considerar el logo 
como si el grafismo transversal del medio no existiera. 
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Esto le ayudara a ver mas claramente las dos V blancas que se cruzan para formar la geometria 
principal. Comencemos por hacer una de ellas usando triangulos y despues haciendo la 
Diferencia: 




Duplique y desplace a la derecha a lo largo del eje X: 




Ahora haga la Union de esos dos objetos. Para continuar saque a escena el cfrculo interior y 
mandelo detras de la W para que sea el objeto dominante a la hora de hacer la Diferencia (antes 
de hacerla asegurese de tener perfectamente alineada la W con el cfrculo) 
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En este momenta, en el que tenemos asegurada la precision geometrica, podemos anadir el 
elemento transversal que hemos estado ignorando desde el principio. Haga la correspondiente 
Union: 

<§)(§> 



Para concluir hay dos opciones (una apropiada y la otra no tanto): 

• Hacer un circulo con relleno bianco y trazo negro y mucho grosor. Este metodo no es bueno 
porque deja independientes las zonas negras y no podran ser editadas a la vez. Por 
ejemplo, si queremos presentar el logo en azul nos obligaria a hacer dos cambios; si 
queremos presentarlo con gradientes el asunto se complicana aun mas. 




• Hacer una corona circular restando dos circulos concentricos (y despues poner otro bianco 
de fondo). Este metodo es apropiado porque nos permitira hacer la Union con lo anterior y 
obtener un solo objeto. 
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<§><§> 

Para hacer el circulo bianco que hara de fondo usaremos el metodo de Copiar/Pegar Tamano... 
Asi que seleccionamos el logo y hacemos Edicion/Copiary despues hacemos un circulo (sin 
contorno) al que aplicamos Edicion/Pegar tamano/Pegar tamano. Alineamos, mandamos atras y 
agrupamos. 
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nexo: Examen 2 



El logotipo que se pide en esta prueba es el siguiente: 




En realidad lo unico que tiene cierta dosis de trampa en este ejercicio es la parte central que 
consta de tres elementos. Comenzaremos por ella haciendo la forma general. 
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Ahora procederemos a seccionarla. Trazamos la siguiente forma asegurando mediante los snaps 
adecuados que los vertices marcados coinciden rigurosamente: 




Es el momento de hacer la division, con la cual obtendremos una de las tres partes... 




Hay que repetir la misma operacion para obtener las otras dos partes a partir del elemento 
general. 
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Creamos ahora los circulos. 




Ha llegado la hora de demostrar si es usted un buen estudiante porque lo que vamos a hacer 
ahora no se a tratado expresamente en el curso. Hay un tipo de snap que permite llevar un nodo 
(u objeto) hacia una trazo y obligarle a desplazarse a lo largo de el. Observe el cuadro de Ajustes: 



Fagin a || Guias Rejillas Ajustar Funtos de ajuste 



A juste 

0 Activar ajuste 

Ajustar: 

0 Nodos 

1 I Esquinas de cajas de contorno 

Ajustar a objetos 

0 Ajustar a trazados 

1 I Ajustar a nodes 
] Ajustar a hordes de cajas de contorno 

I I Ajustar a esquinas de cajas de contorno 
0 Ajustar solo si esta mas cerca que: 

Distancia de ajuste - J 50 



Ajustar a trazos es la clave. Con esto vamos a conseguir que los nodos que estan en contacto con 
los circulos lo hagan de una manera precisa. 
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Los segmentos cortos presentan cierto grado de curvatura. Yo prefiero hacerlo ahora que ya se 
que los nodos estan colocados con precision. Y despues de una correcta ordenacion de los 
objetos, debemos tener esto: 



Admito que para conseguir ciertos efectos en los "brazos" senan necesarios algunos pequenos 
objetos mas asf como para la creacion del efecto 3d de las bolas. No creo que aporte gran cosa a 
estas alturas de curso una description de la creacion de los gradientes pero si le recomiendo que 
comience las bolas con un circulo verde piano de fondo y despues anada mas objetos 
desenfocados y con gradiente. Le propongo esta solution para la esfera de arriba: 
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Y para la sombra de abajo bastaria con hacer una suma de todos los objetos (una vez 
duplicados), ponerlos de color negro, escalar en el eye Yy desenfocar... 




Ahora el reto de concluir el ejercicio queda en sus manos.. 
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41 

Daclint 



Joaclinj 
istgud 

Diseno por Ordenador con Freeware 
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